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:

"external-graphic" Over/Under Flow - Apache FOP

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

 Introduction of XSL-FO

 Apache™ FOP (Formatting Objects Processor)

 RenderX XEP as an XSL-FO Tool

 Introduction of Area Model

 XSL-FO Document Basics and Examples

 Page Layout Masters

 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

 Table of Rows and Columns

 List, Item, Label, and Body

 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

 RenderX XEP Font Configurations

 References

 PDF Printing Version