0

How can I display text in a div vertically like this? vertical text

I've been trying CSS but no success

Community
  • 1
  • 1
TomNg
  • 1,897
  • 2
  • 18
  • 25

1 Answers1

2

You can try using CSS Block Flow:

.myText {
    -ms-writing-mode: tb-rl;
 /* old syntax. IE */
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
 /* new syntax */
    -webkit-text-orientation: upright;
    -moz-text-orientation: upright;
    -ms-text-orientation: upright;
    text-orientation: upright;
}
<div class="myText">
  䦦コめ じぢゃ蝥㠧簥 䩩騧ほ堨べ び楌奯狦ぐ ぎょき
</div>

Note: CSS Block flow is still part of w3 school's 2014 draft so there will be compatibility issues with certain mobile devices but if the scope of your question does not extend to that degree, this solution is optimal.

Xenyal
  • 2,136
  • 2
  • 24
  • 51
Anik Islam Abhi
  • 25,137
  • 8
  • 58
  • 80
  • This worked for Chrome (-webkit-writing-mode: vertical-rl), but not Firefox nor IE – TomNg Nov 25 '14 at 03:48
  • Thanks Xenyal for your editing. It's really great – Anik Islam Abhi Nov 25 '14 at 03:58
  • I've found an [article](http://generatedcontent.org/post/60984978732/text-combine-horizontal) on this, but that doesn't seem to be supported by Firefox. – TomNg Nov 25 '14 at 04:39
  • 1
    @JaHax interestingly enough, apparently FireFox only supports transform rotations ... All in all, this is the best solution here. Mind I ask what you need this code for? Because in an actual production setting, you should be looking to render the text as images, or as SVG/Canvas elements. – Xenyal Nov 25 '14 at 05:38
  • This absolutely not for production purpose. I want to display text this way because then I can easily change text appearance (i.e. line gap, text size). I guess this is not a mature feature and needs some work-around. – TomNg Nov 25 '14 at 07:57