使用 Flying Saucer/CSS 的竖线页码

Question

我正在使用 Flying Saucer 和 CSS 生成一个 PDF，该 PDF 应该打印成一本书（我不关心在浏览器中显示）。我想要

@left-bottom

/

@right-bottom

区域中的页码，用 1.5 英寸长的垂直线与正文分隔。我不能让它 100% 正常工作，我不确定这只是我的 CSS 技能平庸，还是 Flying Saucer 的问题，或两者兼而有之。

无论如何，我的基线是这个 CSS，我愚蠢地认为它会让我有点接近期望的结果：

@page :left
{
  margin-left: 0.6in;
  margin-right: 0.9in;
  @left-bottom
  {
    content: counter(page);
    text-align: right;
    border-right: 0.5pt solid black;
  }
}
@page :right
{
  margin-left: 0.9in;
  margin-right: 0.6in;
  @right-bottom
  {
    content: counter(page);
    text-align: left;
    border-left: 0.5pt solid black;
  }
}

我原以为垂直线会覆盖页面底部的三分之一，但它从上到下贯穿整个页面。我尝试添加

min-height

/

max-height

/

height

属性，但它们都没有任何效果。

接下来我尝试添加一些不可见的虚拟内容（NBSP），只是为了更好地理解

@left-top

/

@left-middle

/

@left-bottom

如何互动：

  @left-top {content: '\a0';}
  @left-middle {content: '\a0';}
  @left-bottom
  {
     ...

  @right-top {content: '\a0';}
  @right-middle {content: '\a0';}
  @right-bottom
  {
     ...

垂直线现在大致覆盖了页面底部的三分之一。它更接近预期的结果，但显然我更愿意明确指定线条的高度：

接下来，我玩弄了顶部和中间区域的

min-height

，我注意到它确实有效果，但不是缩小下面的元素，它只是将它们推离页面：

  @right-top {content: '\a0';}
  @right-middle
  {
    content: '\a0';
    min-height: 4in;
  }
  @right-bottom
  {
    content: counter(page);
    text-align: left;
    border-left: 0.5pt solid black;
    vertical-align: top;
    padding-top: 1.3in;
  }

主要问题是垂直线在页码下方继续并且实际上完全从页面流出：

最终，我决定改变策略，尝试完全基于文本内容的解决方案：

@page :left
{
  margin-left: 0.6in;
  margin-right: 0.9in;
  @left-bottom
  {
    content: '|\a|\a|\a|\a|\a' counter(page) '|';
    text-align: right;
    white-space: pre;
    line-height: 65%;
  }
}
@page :right
{
  margin-left: 0.9in;
  margin-right: 0.6in;
  @right-bottom
  {
    content: '|\a|\a|\a|\a|\a|' counter(page);
    text-align: left;
    white-space: pre;
    line-height: 65%;
  }
}

它让我在某种程度上间接地实现了我想要的。在屏幕上渲染时，

|

字符重叠的地方似乎变粗了，但它实际上可能打印 OK：

显然，这是一个完整的 hack。有谁知道合适的解决方案？