Wie funktioniert vertikaler Text für Tabellenzellen im ausgelagerten Medienmodul?

Question

Ich arbeite mit dem Antenna House Formatter Werkzeug (v6.3), um PDF-Dateien aus HTML-Dokumenten mit Anhang css3 (seitenweise Medienmodul) zu rendern.

Ich möchte den Text in einer Tabellenzelle um 90 ° gegen den Uhrzeigersinn drehen. Die Höhe der gedrehten Tabellenzelle sollte automatisch festgelegt werden.

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> 

Wie Sie die Tabellenzelle sehen tut eine Hilfsklasse haben und auch für die Zelle vererben Inhalt eines Rotations Wrapper div.

CSS-Code

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

gerenderte Ergebnis (PDF)

Das gerenderte Ergebnis einen ungewöhnlichen großen Zeichenabstand hat. Auch Text-Ausrichtungs- und Vertikal-Ausrichtungs-CSS-Eigenschaften werden nicht mehr angewendet (z. B. Hilfsklassen Mitte und Mitte auf td).

Gibt es eine einfache Möglichkeit, den Tabellenzelleninhalt nur zu drehen und die Wrapperbreite beizubehalten (automatisch)?

Answer 1

Sie verwenden zwei Befehle, die sowohl die Textrichtung beeinflussen:

transform: rotate(-180); dies dreht den Text.

writing-mode: vertical-rl; die einen Schreibmodus (Zeichen untereinander) setzt, wird dies für z. Japanisch. Ihr Zeichenabstand ist ein Nebeneffekt davon.

Sie sollten transform: rotate(90); (oder vielleicht 270) verwenden und den Schreibmodus-Befehl überspringen.