XSL-FO Tutorials - Herong's Tutorial Examples - Version 2.10, by Dr. Herong Yang
Image Over and Under Flow Area
This section provides a tutorial example to demonstrate how image may over flow or under flow the specified area size, if 'scale-to-fit' is not specified.
Another think to remember when managing graphics resolution is that if area size specified without using the "scale-to-fit" flag, the displayed image may under-flow or over-flow the area.
Let's assume that I have a tangram image of 120x120 pixel stored in 2 files: Tangram-120-DPI.jpg with 120 DPI resolution properties included, and Tangram-No-DPI.gif with no resolution properties included. Here is my tutorial example, external-graphic-Over-Under-Flow.fo, that displays the tangram image in two blocks differently:
<?xml version="1.0" encoding="utf-8"?> <!-- external-graphic-Over-and-Under-Flow.fo - Copyright (c) 2016, HerongYang.com, All Rights Reserved. --> <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <fo:layout-master-set> <fo:simple-page-master master-name="page" margin="0.1in" page-height="6in" page-width="3.5in"> <fo:region-body region-name="body" background-color="#eeeeee"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="page"> <fo:flow flow-name="body"> <fo:block-container width="1in" border-width="1px" border-style="solid"> <fo:block>1 inch</fo:block> </fo:block-container> <fo:block-container width="72px" border-width="1px" border-style="solid"> <fo:block>72 px</fo:block> </fo:block-container> <fo:block-container width="120px" border-width="1px" border-style="solid"> <fo:block>120 px</fo:block> </fo:block-container> <fo:block-container border-width="1px" border-style="solid"> <fo:block>Image under-flow area:</fo:block> <fo:block> <fo:external-graphic width="1.6in" height="1.6in" border-width="2px" border-style="solid" border-color="red" src="url('Tangram-120-DPI.jpg')"/> </fo:block> </fo:block-container> <fo:block-container border-width="1px" border-style="solid"> <fo:block>Image over-flow area:</fo:block> <fo:block> <fo:external-graphic width="0.8in" height="0.8in" border-width="2px" border-style="solid" border-color="red" src="url('Tangram-No-DPI.gif')"/> </fo:block> </fo:block-container> </fo:flow> </fo:page-sequence> </fo:root>
If you process this example XSL-FO document with Apache FOP tool, you should see the tangram image displayed 2 times in different sizes:
Note that:
Exercise: process this example XSL-FO document with RenderX XEP tool to see the impact of XSL processor default resolution on the second tangram.
Last update: 2016.
Table of Contents
About This XSL-FO Tutorial Book
Apache™ FOP (Formatting Objects Processor)
XSL-FO Document Basics and Examples
Block-Level Formatting Objects
Inline-Level Formatting Objects
►Including Graphics in XSL-FO document
What Is "external-graphic" Formatting Object?
Control DPI with "content-width" and "content-height"
Fixed Higher DPI with "scale-to-fit"
Resolution Included in Image Files
►Image Over and Under Flow Area
"external-graphic" with SVG Diagram
"instream-foreign-object" Formatting Object
Floating Blocks - "float" and "footnote"
Hyperlinks, Table of Contents and Indexes
Headers and Footers using "static-content"
Font Attributes and Font Families
Apache FOP Font Configurations