1

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)

enter image description here

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

garlicDoge
  • 197
  • 1
  • 3
  • 18

1 Answers1

0

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.

Hobbes
  • 1,964
  • 3
  • 18
  • 35
  • Good points. Yes, I can simply use the rotate property, but the height of the text (or wrapper element) will not be automatically aligned. – garlicDoge May 22 '17 at 13:58
  • Then there may be a mistake in the definition of 'center' and/or 'middle' that prevent it being applied when a cell is rotated. Better to fix that than to try and circumvent it using text-direction. – Hobbes May 22 '17 at 14:05
  • Didn´t got that. The question is: how does a "proper" vertical text alignment (rotated text) work for table cells with height kept auto? – garlicDoge May 23 '17 at 05:42