SaltyCrane Blog — Notes on JavaScript and web development

Examples of CSS text-orientation and writing-mode

Date:  |  Modified:  |  Tags: css

Shared CSS

CSS
.ex {
    border: 1px solid #ccc;
    height: 120px;
    padding: 5px;
    width: 120px;
}

Examples of permutations of writing-mode and text-orientation

horizontal-tb, mixed
Some example text
HTML
<div class="ex" id="example-0a">      
  Some example text
</div>
CSS
#example-0a {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
horizontal-tb, upright
Some example text
HTML
<div class="ex" id="example-0b">      
  Some example text
</div>
CSS
#example-0b {
  writing-mode: horizontal-tb;
  text-orientation: upright;
}
vertical-rl, mixed
Some example text
HTML
<div class="ex" id="example-1a">      
  Some example text
</div>
CSS
#example-1a {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
vertical-rl, upright
Some example text
HTML
<div class="ex" id="example-1b">      
  Some example text
</div>
CSS
#example-1b {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
vertical-lr, mixed
Some example text
HTML
<div class="ex" id="example-2a">      
  Some example text
</div>
CSS
#example-2a {
  writing-mode: vertical-lr;
  text-orientation: mixed;
}
vertical-lr, upright
Some example text
HTML
<div class="ex" id="example-2b">      
  Some example text
</div>
CSS
#example-2b {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

Comments