Superdopey’s Techblog

Het tonen van verticale tekst via CSS is alleen weggelegd voor IE Browsers middels de volgende CSS3 regels:

writing-mode: tb-rl;
filter: flipv fliph;

Dit is een mooie manier om bijvoorbeeld tabel headers verticaal weer te geven. Maar helaas wordt deze CSS regel tot nu toe alleen toegepast in IE browsers. Om dit ook in non-IE browsers mogelijk te maken, gebruikt men vaak dynamisch gegenereerde images met de gewenste tekst.

Dit werkt natuurlijk ook maar het zorgt wel voor extra belasting op de webserver, tevens is dit lastig te onderhouden. Op zoek naar een betere oplossing, kwam ik een oplossing tegen die gebruik maakt van een statisch svg object met daarin een javascript welke de verticale text zet. Dit is al een betere oplossing alleen het aanroepen van de javascript binnen het svg object is niet erg netjes. Daarnaast moet op elke plek waar je verticale tekst wil gebruiken de svg toevoegen via de <embed> tag.

De oplossing voor dit probleem heb ik gevonden door met behulp van de jQuery SVG plugin deze svg zelf te genereren:

function SetVerticalText() {
    var verticalTexts = $(".verticalText");

    verticalTexts.each(function() {
        var text = $(this).text();
        $(this).text("");

        if (!$.browser.msie) {
            $(this).append("<div class='svgContainer'></div>");
            $(this).find(".svgContainer").svg();
            var svg = $(this).find(".svgContainer").svg('get');
            svg.text(null, -48, 12, text, { transform: 'rotate(270, 50, 50)', 'font-family': 'Arial', 'font-size': '10', 'letter-spacing': '2' });
        }
        else {
            $(this).append("<span class='verticalTextSpan'>" + text + "</span>");
        }
    });
}

Hier bij geef ik alle tekst elementen die ik verticaal wil weergeven de CSS class .verticalText bijvoorbeeld in mijn table headers:

<table cellpadding="0" cellspacing="0" class="statusTable width700" >
<tr>
<td class="labelCell">
NFP-SC
</td>
<td class="verticalText">
Digitaal initieel
</td>
<td class="verticalText">
Digitaal ingediend
</td>
<td class="verticalText">
Papier ingediend
</td>
<td class="verticalText">
Direct afgewezen
</td>
</tr>
</table>

Wanneer ik nu de SetVerticalText() aanroep, wordt er voor alle non-IE browsers een <div class=’svgContainer’></div> toegevoegd. Vervolgens wordt er middels de jQuery SVG plugin een svg object aangemaakt met daarin de verticale tekst.

Voor IE-browsers wordt er een <span class=’verticalTextSpan’></span> tag toegevoegd met daarin de verticale tekst.

Een demo van deze techniek.

svgDemo Source (73)