How does vertical text work for table cells in the paged media module?

Question

I work with the Antenna House Formatter tool (v6.3) in order to render PDF files out of html documents with attached css3 (paged media module).

I want to rotate the text in a table cell by 90° counter-clockwise. The height of the rotated table cell should be automatically set.

HTML code

<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>

As you can see the table cell does have a helper class and also a rotation wrapper div for the cell inherit content.

CSS code

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

Rendered Result (PDF)

The rendered result has an unusual large character spacing. Also text-alignment and vertical alignment css properties wont be applied any more (e.g. helper classes center and middle on td).

Is there a simple way to just rotate the table cell content and keep the wrapper width (auto)?

Answer 1

You're using 2 commands that both affect the text direction:

transform: rotate(-180); this rotates the text.

writing-mode: vertical-rl; which sets a writing mode (characters below each other), this is used for e.g. Japanese. Your character spacing will be a side effect of this.

You should be able to use transform: rotate(90); (or maybe 270) and skip the 'writing-mode' command.