Powiedzmy, że mam kilka kolumn, z których niektóre chciałbym obrócić wartości:

http://jsfiddle.net/MTyFP/1/

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

Z tym CSS:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

Wygląda to tak:

Czy jest możliwe napisanie dowolnego CSS, który spowoduje, że obrócony element wpłynie na wysokość jego rodzica, tak że tekst nie będzie się nakładał na inne elementy? Coś takiego: