Log in / Register

Forum › How do I...?

not working: html to pdf, using css property writing-mode "vertical-rl"

texastimdev
Hi, I saw from this old forum post that only "vertical-rl" mode was supported, but I can't get that to work.

https://www.princexml.com/forum/topic/4312/writing-mode-vertical-lr-problem?p=1#21619

Here's my minimal index.html with embedded style sheet. It appears correctly in Chrome and Firefox. It saves to PDF correctly in Firefox only. And when I process the index.html with prince, I get upside down text instead of 90 degree rotated text.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        
html {
    font-size: 16px;
}

table, th, td {
    border: 2px solid black;
    border-collapse: collapse;
    padding: 0.5rem;
}

.register_bit_map td {
    writing-mode: vertical-rl;
    /*height: 8rem;*/
    transform: rotate(180deg);
    /*text-align: left;*/
    width: 0.75rem;
    padding-left: 0.3em;
    padding-right: 0.7rem;
}

p {
    
}
    </style>
</head>
<body>
    <table class="register_bit_map">
        <tr><th>15</th><th>14</th><th>13</th><th>12</th><th>11</th><th>10</th><th>9</th><th>8</th><th>7</th><th>6</th><th>5</th><th>4</th><th>3</th><th>2</th><th>1</th><th>0</th></tr>
        <tr><td>CR_EN</td><td>CR_RM</td><td>CR_RPL</td><td>A_Z</td><td>B_Y</td><td>C_X</td><td>D_W</td><td>E_V</td><td>F_T</td><td>G_S</td><td>H_R</td><td>I_N</td><td>J_M</td><td>K_L</td><td>K_J</td><td>L_H</td></tr>
    </table>
</body>
</html>



Screenshot attached shows correct appearance as rendered by Chrome browser.

Any assistance is appreciated... Thanks! :-)

Tim
  1. bitfield.png‎ 16.2 kB ‎
    desired appearance of index.html
mikeday
This is a limitation of writing-mode on table cells, if you wrap each table cell content in a div and apply the writing-mode property to that then it behaves better.
texastimdev
Thanks, Mike! I'll try that out.

Tim