首页 文章

垂直文本如何用于分页媒体模块中的表格单元格？

提问于
浏览 次
1

我使用Antenna House Formatter工具(v6.3)来渲染带有附加 css3(分页媒体模块)的 html 文档中的 PDF 文件。

我想将表格单元格中的文本旋转 90°counter-clockwise。应自动设置旋转的表格单元格的高度。

HTML 代码

<td class="center middle verticaltext" rowspan="1" colspan="1">
  <div class="vtext">
    <b>Number of joints /</b> 
    <p>
      <b>Number of bolts per joint</b> 
    </p>                                                  
  </div>
</td>

正如您所看到的，表格单元格确实有一个辅助类，而且单元格的循环包装 div 也继承了内容。

CSS 代码

tr > *.verticaltext > .vtext {
    writing-mode: vertical-rl;
    transform: rotate(-180);
}

呈现结果(PDF)

在此输入图像描述

渲染结果具有不寻常的大字符间距。此外 text-alignment 和垂直对齐 css 属性将不再应用(e.g. 辅助类中心和中间在 td 上)。

是否有一种简单的方法来旋转表格单元格内容并保持包装宽度(自动)？

html html-table pdf-generation vertical-text css-paged-media

1 回答

  • 0

    您正在使用两个影响文本方向的命令：

    transform: rotate(-180);这会旋转文本。

    writing-mode: vertical-rl;设置写入模式(字符彼此之下)，用于 e.g. 日本。你的角色间距将是一个副作用。

    您应该能够使用transform: rotate(90);(或者可能是 270)并跳过“writing-mode”命令。

    回复于

相关问题