Member Avatar for grungetta

i am using

writing-mode: tb-rl;

to get this affect:


<td style="writing-mode: tb-rl;">Hello World</td>


does anyone know how this can be achieved in firefox and opera? as this only works in IE

  • 2 Contributors
  • 3 Replies
  • 133 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by FC Jamison

Dani AI

Generated

tried the IE-only vertical writing support and, as noted, older Firefox builds did not implement the CSS3 feature back then. The simple hacks mentioned in the thread — inserting spaces or nesting one-character blocks — do work, but they are fragile: they break selection, make international text awkward, and require extra markup or manual spacing.

A practical, cross-browser fallback that works today is to rotate the element with CSS transforms. This preserves normal DOM text and selection and is simple to apply:

.vertical-rot {
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}

Transforms have good support and are useful when a quick solution is needed, but rotated elements affect layout (bounding boxes, table cell sizing) so adjust margins/widths accordingly. See the transform docs for details: MDN transform.

For true vertical typography (glyphs upright, proper line progression) modern browsers support the standardized writing-mode and text-orientation features. Those give correct shaping and flow and are the recommended approach for new work; see MDN writing-mode and MDN text-orientation.

Other robust options: use an SVG <text> block when precise positioning or rotation per-letter is needed, or use a small script to wrap characters in block spans (similar in effect to the nested-div idea but automated). Example splitting script:

var el = document.querySelector('.vtext');
el.innerHTML = el.textContent.split('').map(function(c){
  return '<span class="vchar">'+(c === ' ' ? '&nbsp;' : c)+'</span>';
}).join('');

with

.vtext { width: 1em; }
.vchar { display: block; line-height: 1; }

Recommendation: for modern projects use writing-mode/text-orientation; for legacy support use transform as a fallback or SVG/JS when control per-glyph is required. For background reading and examples see and the MDN links above.

Recommended Answers

All 3 Replies

Member Avatar for FC Jamison

Firefox is only CSS2 compliant not CSS3

Member Avatar for grungetta

yeh, i realised that... but has anyone achieved the same thing via a different way, that wouldnt involve using images?

like, putting a space between every letter and using white-space: pre


any ideas?

Member Avatar for FC Jamison

I'm not familiar with this style...but I think I have the general idea.

You could use a container div with nested divs inside. Set the nested divs to the width of one character (this creates the top-to-bottom effect), then float each of the nested divs on the right margin (this will create the right-to-left effect).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.