HTML - No alterations to Writing Mode

Question

Hello everyone, I'm attempting to display a header vertically in my table but the writing-mode property is not having any effect.

CSS

.VerticalText
{
  writing-mode: tb-rl;
}

HTML

<td rowspan="6" id="tableHeader" class="Border">
   <h1 class="Font12 VerticalText Centre">Project Details</h1>
</td>

The text in the blue box should be displayed vertically as shown in the image above.

Answer 1

Answer №1

writing-mode: tb-rl; has been marked as Deprecated. Check out https://developer.mozilla.org/en/docs/Web/CSS/writing-mode

You can now use writing-mode: vertical-rl

.VerticalText
{
  writing-mode: vertical-rl;
}

<td rowspan="6" id="tableHeader" class="Border">
   <h1 class="Font12 VerticalText Centre">Project Details</h1>
</td>

Answer 2

writing-mode: tb-rl; has been marked as Deprecated. Check out https://developer.mozilla.org/en/docs/Web/CSS/writing-mode

You can now use writing-mode: vertical-rl

.VerticalText
{
  writing-mode: vertical-rl;
}

<td rowspan="6" id="tableHeader" class="Border">
   <h1 class="Font12 VerticalText Centre">Project Details</h1>
</td>

Answer 3

Switching to

writing-mode: vertical-rl;

solved the problem. I had been working in Atom editor with a live preview plugin that couldn't understand the updated CSS.

Answer 4

Switching to

writing-mode: vertical-rl;

solved the problem. I had been working in Atom editor with a live preview plugin that couldn't understand the updated CSS.