如何使用fo:leader实现左块顶对齐、右块底对齐的垂直布局？

Absolutely, this is totally achievable! The issue right now is that both your inline containers are set to vertical-align="top", which makes them line up at the top. Here are two solid approaches to get the left block top-aligned and the right block bottom-aligned when each has two lines:

Approach 1: Using Inline Containers with Adjusted Vertical Alignment #

Keep your existing inline container structure but tweak the vertical alignment for the right block, and make sure the leader fills the gap properly:

<fo:block>
  <!-- Left container: stays top-aligned -->
  <fo:inline-container vertical-align="top" inline-progression-dimension="60%">
    <fo:block start-indent="0.5em">
      Left Block Line 1<br/>
      Left Block Line 2
    </fo:block>
  </fo:inline-container>

  <!-- Leader to bridge the space between blocks -->
  <fo:leader leader-pattern="rule" rule-thickness="0.5pt" color="#000"/>

  <!-- Right container: set to bottom-align -->
  <fo:inline-container vertical-align="bottom" inline-progression-dimension="38%">
    <fo:block>
      Right Block Line 1<br/>
      Right Block Line 2
    </fo:block>
  </fo:inline-container>
</fo:block>

Key Notes for This Approach: #

• Set vertical-align="bottom" on the right fo:inline-container — this anchors its bottom edge to the bottom of the line containing the left container's content.
• Adjust the inline-progression-dimension values (like 60% and 38%) to leave a small gap for the leader, preventing content overflow.
• Ensure all elements are inside the same parent fo:block so they share the same inline formatting context.

Approach 2: Using a Table for More Stable Layout #

If you want more control over alignment and width (especially if content might vary in line count later), a table structure is often more reliable:

<fo:table table-layout="fixed" width="100%">
  <fo:table-column column-width="60%"/>
  <fo:table-column column-width="2%"/> <!-- Column for the leader/rule -->
  <fo:table-column column-width="38%"/>

  <fo:table-body>
    <fo:table-row>
      <!-- Left cell: top-aligned -->
      <fo:table-cell vertical-align="top">
        <fo:block start-indent="0.5em">
          Left Block Line 1<br/>
          Left Block Line 2
        </fo:block>
      </fo:table-cell>

      <!-- Middle cell with horizontal rule -->
      <fo:table-cell>
        <fo:block>
          <fo:leader leader-pattern="rule" rule-thickness="0.5pt" color="#000"/>
        </fo:block>
      </fo:table-cell>

      <!-- Right cell: bottom-aligned -->
      <fo:table-cell vertical-align="bottom">
        <fo:block>
          Right Block Line 1<br/>
          Right Block Line 2
        </fo:block>
      </fo:table-cell>
    </fo:table-row>
  </fo:table-body>
</fo:table>

Why This Works: #

• Table cells let you directly set vertical-align on each cell independently, so the left cell sticks to the top and the right cell to the bottom.
• Fixed table layout ensures your columns stay consistent regardless of content length.

Most major FO processors (like Apache FOP, RenderX XEP) support both of these methods, so test with your tool of choice to confirm the output matches your needs.

内容的提问来源于stack exchange，提问作者Audye Junior