Vertical Text Direction

Vertical Text Direction

Alternative approach: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

CSS Text orientation : vertically oriented to the right

sideways isn't supported by all the browser. Instead you can replace it with a scale transformation

div {  writing-mode: vertical-rl;  /*text-orientation: sideways;*/  transform:scale(-1);}
<div>dimanche</div>

css text orientation vertical but like writing bottom up

You can try use transform and rotate

.word {
margin: 50px -30px;
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
background-color: whitesmoke;
width: 100px;
text-align: center;
}
<div class="word">hello world</div>

HTML/CSS : How to write a text vertically, keeping the characters horizontally

You may use the writing-mode CSS property in conjunction with the text-orientation CSS property.

div {
writing-mode: vertical-lr;
text-orientation: upright;
}

To quote, writing-mode property..

[..]specifies the block flow direction, which is the direction in
which block-level containers are stacked, and the direction in which
inline-level content flows within a block container. Content flows
vertically from top to bottom, horizontally from right to left. The
next vertical line is positioned to the left of the previous line.

In effect, this defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

text-orientation property defines the orientation of the text characters in a line. This property only has an effect in vertical mode.

Example:

p:first-of-type {  writing-mode: vertical-lr;}p:last-of-type {  writing-mode: vertical-lr;  text-orientation: upright;}
<h4>With writing mode "vertical-lr"</h4><p>Start</p><hr><h4>With writing mode "vertical-lr" and text-orientation "upright"</h4><p>Start</p>

Changing text direction to appear from bottom to the top - Confluence

Change the height of the main article table and it will go from bottom to top.

th {
vertical-align: bottom;
text-align: center;
}

th span {
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-tb;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}

table {
height: 100vh;
}
<table>
<tr>
<th><span>Project Sponsor</span></th>
</tr>
</table>

How to write vertical text from bottom to top without using transform rotate?

I combined writing-mode and rotation: