title: XSL-FO: Absolute positioning of allocation rectangle rather than content rectangle
body: <p>I'm implementing PDF export of 'dashboards' using XSL-FO (with Apache FOP as the rendering engine). These dashboards are defined as a set of rectangular elements rendered within an area of a particular size, whose positions are defined by percentage top/left offsets and percentage widths/heights. Rendering this using XSL-FO absolute positioning seemed like the obvious solution, and for the most part works well.</p>
  
  <p>The following XSL-FO:</p>
  
  <pre><code>&lt;fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" font-size="10pt" id="sequence-id"&gt;
  &lt;fo:layout-master-set&gt;
  &lt;fo:simple-page-master master-name="page-layout" page-width=" 4in " page-height=" 4in "&gt;
      &lt;fo:region-body region-name="document-content" margin="0.5in"/&gt;
  &lt;/fo:simple-page-master&gt;
  &lt;/fo:layout-master-set&gt;
  &lt;fo:page-sequence master-reference="page-layout" initial-page-number="1"&gt;
  &lt;fo:flow flow-name="document-content"&gt;
  &lt;fo:block-container border="1px solid green" height="3in"&gt;
  &lt;fo:block-container absolute-position="absolute" width="50%" left="0" top="0" height="40%" border="1px solid red"&gt;
      &lt;fo:block border="1px solid blue" background-color="green"&gt;I am some content. It is possible for me to occupy the entire width of my allocated area.&lt;/fo:block&gt;
  &lt;/fo:block-container&gt;
  &lt;fo:block-container absolute-position="absolute" width="50%" left="50%" top="0" height="50%" border="1px solid red"&gt;
      &lt;fo:block border="1px solid blue" background-color="green"&gt;I am some content&lt;/fo:block&gt;
  &lt;/fo:block-container&gt;
  &lt;fo:block-container absolute-position="absolute" width="50%" left="0" top="40%" height="60%" border="1px solid red"&gt;
      &lt;fo:block border="1px solid blue" background-color="green"&gt;I am some content&lt;/fo:block&gt;
  &lt;/fo:block-container&gt;
  &lt;fo:block-container position="absolute" width="50%" left="50%" top="50%" height="50%" border="1px solid red"&gt;
      &lt;fo:block border="1px solid blue" background-color="green"&gt;I am some content&lt;/fo:block&gt;
  &lt;/fo:block-container&gt;
  &lt;/fo:block-container&gt;
  &lt;/fo:flow&gt;
  &lt;/fo:page-sequence&gt;
  &lt;/fo:root&gt;
  </code></pre>
  
  <p>...results in the following output:</p>
  
  <p><a href="https://i.stack.imgur.com/YcC50.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YcC50.png" alt="Example with no padding"></a></p>
  
  <p>The green areas, representing the content of a dashboard element, butt up against each other, which is ugly. So, I want to add some padding around the content. If I add padding to the <code>block-container</code> representing the first dashboard element:</p>
  
  <pre><code>&lt;fo:block-container absolute-position="absolute" padding="5px" width="50%" left="0" top="0" height="40%" border="1px solid red"&gt;
  </code></pre>
  
  <p>...the (red) border of the dashboard element expands outward rather than adding padding inward:</p>
  
  <p><a href="https://i.stack.imgur.com/GDbrX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GDbrX.png" alt="Example with padding naively added"></a></p>
  
  <p>This is because, in contrast to CSS, absolute positioning offsets in XSL-FO address the content rectangle (i.e., inside the padding) rather than a rectangle including padding and borders. Per <a href="https://www.w3.org/TR/xsl11/#left" rel="nofollow noreferrer">the spec</a>:</p>
  
  <blockquote>
    <p>These properties set the position of the content-rectangle of the associated area.</p>
  </blockquote>
  
  <p>I want some way to add padding/a border inside the area I allocate to the dashboard element via absolute positioning attributes. I've tried various things around putting the content inside another nested <code>block-container</code> or <code>block</code>, but nothing I've tried works properly. As a last resort, I could compute the offsets/dimensions to effectively leave some blank space between elements, but this feels like something that should be handled automatically by the rendering engine. Any suggestions?</p>