XSL-FO Tutorials - Herong's Tutorial Examples - Version 2.10, by Dr. Herong Yang
Fixed Higher DPI with "scale-to-fit"
This section provides a tutorial example on how to use 'content-width' and 'content-height' attributes in 'external-graphic' formatting object to control image rendering resolution, DPI (Dot Per Inch).
In the previous tutorial, we learned how to lower "content-width" and "content-height" to half of the image real size to double the image rendering resolution from 72 DPI to 144 DPI with Apache FOP processor.
But if you process the same tutorial example, external-graphic-content-width-height.fo, with RenderX XEP, images will be rendered smaller than Apache FOP, because RenderX XEP uses 120 DPI resolution to process "external-graphic" formatting objects.
So the next question is how to display images at a fixed solution, like 144 DPI, to result the same size independent of XSL processors?
The solution is to use 2 more attributes "width" and "height" to fix the output inline area size and set content-width="scale-to-fit" and content-height="scale-to-fit".
For example, if you have an image of 277x163 px (pixel), and you set width="1.92in", height="1.13in", content-width="scale-to-fit" and content-height="scale-to-fit". This ensures that the image will be rendered at a resolution of 277/1.92 = 144 DPI with all XSL processors.
Here is my tutorial example, external-graphic-scale-to-fit.fo, that has two "external-graphic" formatting objects: one with the default resolution and one with a fixed resolution:
<?xml version="1.0" encoding="utf-8"?> <!-- external-graphic-scale-to-fit.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="5in" page-width="5in"> <fo:region-body region-name="body" background-color="#eeffff"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="page"> <fo:flow flow-name="body"> <fo:block border-width="1px" border-style="solid"> <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 border-width="1px" border-style="solid"> Picture size = 277x163 at default resolution: <fo:external-graphic src="Newton-Third-Law-of-Motion.jpg"/> </fo:block> <fo:block border-width="1px" border-style="solid"> Picture size = 277x163 at a fixed resolution 144dpi: <fo:external-graphic src="Newton-Third-Law-of-Motion.jpg" width="1.92in" height="1.13in" content-width="scale-to-fit" content-height="scale-to-fit"/> </fo:block> </fo:block> </fo:flow> </fo:page-sequence> </fo:root>
If you process this example XSL-FO document with Apache FOP tool and RenderX XEP tool, you should see the second image is always displayed with the same size and as same resolution of 144 DPI:
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