"instream-foreign-object" Formatting Object

XSL-FO Tutorials - Herong's Tutorial Examples

∟"instream-foreign-object" Formatting Object

This section describes the 'instream-foreign-object' formatting object, which is used to take embedded object to generate an inline area. It is mostly used to embed SVG diagrams.

What Is an "instream-foreign-object" Formatting Object? "instream-foreign-object" is an inline-level formatting object that takes an embedded XML structure to generate an inline area.

An "instream-foreign-object" formatting object supports the following main attributes:

content-type="..." - Optional attribute to specify the MIME type of the source. Default is content-type="auto", which allows the processor to auto detect by reading data from the source.
content-width="..." - Optional attributes to specify the width of the external image. Default is content-width="auto", which allows the processor to auto detect by reading data from the source.
content-height="..." - Optional attributes to specify the height of the external image. Default is content-height="auto", which allows the processor to auto detect by reading data from the source.
width="..." - Optional attributes to specify the width of the output inline area. Default is width="auto", which allows the processor to calculate it by applying the default DPI to content-width.
height="..." - Optional attributes to specify the height of the output inline area. Default is height="auto", which allows the processor to calculate it by applying the default DPI to content-height..
margin-*="..." - Optional attributes to specify the margin on the 4 sides of the area. Default is margin="0pt".
border-*="..." - Optional attributes to specify the border on the 4 sides of the area. Default is border="0pt".
padding-*="..." - Optional attributes to specify the padding on the 4 sides of the area. Default is padding="0pt".
alignment-*="..." - Optional attributes to specify how this inline area should be aligned with its parent area, the line area that contains this inline area. By default, this image area is aligned at the bottom edge of the parent line.

Here is my tutorial example, instream-foreign-object-SVG.fo, that shows an "instream-foreign-object" formatting object inserting a SVG diagram with an embedded SVG XML sub structure:

<?xml version="1.0" encoding="utf-8"?>
<!-- instream-foreign-object-SVG.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="4in" page-width="3in">
   <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">
     Embedded SVG diagram:
<fo:instream-foreign-object width="1.5in" height="1.5in"
 content-width="scale-to-fit" content-height="scale-to-fit"
 xmlns:svg="http://www.w3.org/2000/svg">
 <svg:svg width="200" height="200"
  viewBox="0 0 20 20">
  <svg:g style="fill:red; stroke:#000000">
   <svg:rect x="0" y="0" width="15" height="15"/>
   <svg:rect x="5" y="5" width="15" height="15"/>
  </svg:g>
 </svg:svg>
</fo:instream-foreign-object>
    </fo:block>
   </fo:block>
  </fo:flow>
 </fo:page-sequence>
</fo:root>

If you process this example XSL-FO document with Apache FOP, you should see a diagram of two red boxes displayed on the page: