Skip to content
All Demos
<?xml version="1.0" encoding="utf-8"?>

<!-- example for a simple fo file. At the beginning the page layout is set.
  Below fo:root there is always
- a single fo:layout-master-set which defines one or more page layouts
- an optional fo:declarations
- and a sequence of one or more fo:page-sequences containing the text and formatting instructions
-->

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

  <fo:layout-master-set>
    <!-- fo:layout-master-set defines in its children the page layout:
       the pagination and layout specifications
      - page-masters: have the role of describing the intended subdivisions
                       of a page and the geometry of these subdivisions
                      In this case there is only a simple-page-master which defines the
                      layout for all pages of the text
  -->
    <!-- layout information -->
    <fo:simple-page-master master-name="simple" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="2cm" margin-left="2.5cm" margin-right="2.5cm">
      <fo:region-body margin-top="3cm"/>
      <fo:region-before extent="3cm"/>
      <fo:region-after extent="1.5cm"/>
    </fo:simple-page-master>
  </fo:layout-master-set>
  <!-- end: defines page layout -->


  <!-- start page-sequence
       here comes the text (contained in flow objects)
       the page-sequence can contain different fo:flows
       the attribute value of master-name refers to the page layout
       which is to be used to layout the text contained in this
       page-sequence-->
  <fo:page-sequence master-reference="simple">

    <!-- start fo:flow
           each flow is targeted
           at one (and only one) of the following:
           xsl-region-body (usually: normal text)
           xsl-region-before (usually: header)
           xsl-region-after  (usually: footer)
           xsl-region-start  (usually: left margin)
           xsl-region-end    (usually: right margin)
           ['usually' applies here to languages with left-right and top-down
            writing direction like English]
           in this case there is only one target: xsl-region-body
        -->
    <fo:flow flow-name="xsl-region-body">



      <!-- each paragraph is encapsulated in a block element
           the attributes of the block define
           font-family and size, line-heigth etc. -->

      <!-- this defines a title -->
      <fo:block font-size="18pt" font-family="Roboto" line-height="24pt" space-after.optimum="15pt" background-color="#8583b9" color="white" text-align="center" padding-top="3pt">
        PdfBroker.io font service demo
      </fo:block>


      <!-- this defines normal text -->
      <fo:block font-size="12pt" font-family="Roboto" line-height="15pt" space-after.optimum="10pt" text-align="justify">
        This demo shows a simple xsl-fo document that generates some paragraphs showing how easy it is to make more personal pdf documents with custom fonts picked up by our font service. Also a bullet list is displayed with the use of the excellent icon font collection Fontawesome. 
      </fo:block>

      <!-- this defines normal text -->
      <fo:block font-size="12pt" font-family="Bangers" line-height="15pt" space-after.optimum="10pt" text-align="justify">
        This demo shows a simple xsl-fo document that generates some paragraphs showing how easy it is to make more personal pdf documents with custom fonts picked up by our font service. Also a bullet list is displayed with the use of the excellent icon font collection Fontawesome. 
      </fo:block>

      <fo:block font-size="12pt" font-family="Heebo" line-height="15pt" space-after.optimum="3pt" text-align="justify">
        <fo:list-block provisional-distance-between-starts="0.7cm" provisional-label-separation="0.5cm">
          <fo:list-item>
            <fo:list-item-label end-indent="label-end()">
              <fo:block font-family="Font Awesome 5 Free Solid" color="#4fd2c2" >&#xf05a;</fo:block>
            </fo:list-item-label>
            <fo:list-item-body start-indent="body-start()">
              <fo:block>
                <fo:inline font-weight="bold">Think of a bullet point as a mini headline.</fo:inline> It needs to be concise and attention-grabbing in a way that intrigues readers and compels them to read more.
              </fo:block>
            </fo:list-item-body>
          </fo:list-item>
          <fo:list-item>
            <fo:list-item-label end-indent="label-end()">
              <fo:block font-family="Font Awesome 5 Free Solid" color="#4fd2c2" >&#xf05a;</fo:block>
            </fo:list-item-label>
            <fo:list-item-body start-indent="body-start()">
              <fo:block>
                <fo:inline font-weight="bold">Highlight elements key to understanding the content of your article.</fo:inline> There’s no room for fluff here, so call out what’s most important.
              </fo:block>
            </fo:list-item-body>
          </fo:list-item>
          <fo:list-item>
            <fo:list-item-label end-indent="label-end()">
              <fo:block font-family="Font Awesome 5 Free Solid" color="#4fd2c2" >&#xf05a;</fo:block>
            </fo:list-item-label>
            <fo:list-item-body start-indent="body-start()">
              <fo:block>
                <fo:inline font-weight="bold">Keep it simple.</fo:inline> Avoid complex outlines and don’t use sub-bullets if you can help it.
              </fo:block>
            </fo:list-item-body>
          </fo:list-item>
          <fo:list-item>
            <fo:list-item-label end-indent="label-end()">
              <fo:block font-family="Font Awesome 5 Free Solid" color="#4fd2c2" >&#xf05a;</fo:block>
            </fo:list-item-label>
            <fo:list-item-body start-indent="body-start()">
              <fo:block>
                <fo:inline font-weight="bold">Keep bullets thematically related.</fo:inline> Bullet points highlight key elements of very specific topics, so stay on a single track.
              </fo:block>
            </fo:list-item-body>
          </fo:list-item>
          <fo:list-item>
            <fo:list-item-label end-indent="label-end()">
              <fo:block font-family="Font Awesome 5 Free Solid" color="#4fd2c2" >&#xf05a;</fo:block>
            </fo:list-item-label>
            <fo:list-item-body start-indent="body-start()">
              <fo:block>
                <fo:inline font-weight="bold">Make your bullet points symmetrical . . . just like the ones here.</fo:inline> Notice how each point begins with a bolded directive and ends with a one-sentence explanation.
              </fo:block>
            </fo:list-item-body>
          </fo:list-item>
          <fo:list-item>
            <fo:list-item-label end-indent="label-end()">
              <fo:block font-family="Font Awesome 5 Free Solid" color="#4fd2c2" >&#xf05a;</fo:block>
            </fo:list-item-label>
            <fo:list-item-body start-indent="body-start()">
              <fo:block>
                <fo:inline font-weight="bold">Work in keywords.</fo:inline> Search engines tend to give bulleted lists a little more weight.
              </fo:block>
            </fo:list-item-body>
          </fo:list-item>
          <fo:list-item>
            <fo:list-item-label end-indent="label-end()">
              <fo:block font-family="Font Awesome 5 Free Solid" color="#4fd2c2" >&#xf05a;</fo:block>
            </fo:list-item-label>
            <fo:list-item-body start-indent="body-start()">
              <fo:block>
                <fo:inline font-weight="bold">Don’t overdo it.</fo:inline> You want your post to look like an article, not a grocery list.
              </fo:block>
            </fo:list-item-body>
          </fo:list-item>
        </fo:list-block>
      </fo:block>

    </fo:flow>    <!-- closes the flow element-->
  </fo:page-sequence>  <!-- closes the page-sequence -->
</fo:root>
Click "Run demo as PDF" or "Run demo as image" to see the result here.
Generating...

Generating your document...

Generated image preview