Lodret og skråtstillet skrift med HTML

Lodret tekst er et af de steder hvor der er stor forskel på browserne, og hvor man absolut skal holde øje med samspillet mellem settings. Det man især skal være opmærksom på, er at for at fungere, laver browserne noget der svarer til en flydende DIV, som ligger i et niveau over det tekst item man vil have den lodrette tekst i. Typisk er det en celle i en tabel man vil have lodret, men det kunne også være andet, f.eks. billedtekst.

Det andet man skal være opmærksom på er, at rotationen også består at en forskydning i x-y-planet, dvs. op og ned og højre og venstre, men ikke for Internet Explorer 8 og tidligere. Egentligt er rotation og forskydning to forskellige og uafhængig parametre man kan justere på, men fordi browserne pr. automatik mener, at hvis man vil have sin tekst roteret, så vil man også have den forskudt (nej, det giver ingen mening, at man har lavet det på den måde, det er en af de mærkværdige ting vi lever med mht. programmering), så kommer de to parametre til at hænge sammen.

Principielt kan man lave den lodrette skrift med en style, direkte på tekstelementet, men, som vi skal se, bliver det noget frygteligt uoverskueligt kode. I stedet laver vi en klasse i vores style sheet. Her kalder vi den VerticalText. Hvis vi nu starter med selve rotationen, vi drejer teksten 90° mod uret, så ser klassen således ud:



Som det ses, er man ved de tidligere versioner af Internet Explorer begrænset til 1, 2 eller 3 gange 90° drejninger, mens man for de nyere browsere kan rotere som man vil. Som man også kan se, skal man bruge tre forskellige koder for at dække det man pt. vil betegne som 'de mest almindelige versioner af IE'.

Fordi siden betragter tekstfeltet som en flydende DIV, er det bedst at specificere sin float. så man ikke har problemer med, at de forskellige versioner af en browser har forskellige default settings. Erfaringsmæssigt er float:left et godt bud, men man må forsøge sig lidt frem.

Ligeledes er det en god idé at specificere position:absolute. Tilsyneladende er det ikke alle browsere der har dette som default når man laver lodret tekst.

Sidst, men ikke mindst, er det en fordel at specificere sin vidde på tekstfeltet. På den lodrette tekst bliver vidden indlysende nok til tekstens højde, og fordi teksten ligger og flyder på et lag over den almindelige vandrette tekst, er der ikke noget til at begrænse højden, andet end det man definerer.

Hvis vi bestemmer os for en højde på 200px, ser vores klasse nu således ud:



At få lavet sin lodrette tekst er nu i bund og grund så simpelt som <DIV CLASS="VerticalText">Min lodrette tekst</DIV>

Det ser således ud:



At få det til at virke, er den lette del. At få det til at se pænt ud er der hvor det bliver noget pillearbejde. Der er heldigvis en godt trick til at få det til at fungere lettere:

Det første man gør, er at afmærke området hvor man vil have den lodrette skrift. Er det en tabel, sørger man for i TD-tag'en at definere højde og bredde på cellerne, er det en DIV eller et tilsvarende tekstafsnit, definerer man ligeledes højde og bredde. De skal selvsagt være mindst lige så store som feltet med den lodrette tekst.

Det næste man gør er at sætte rammer på tekstområdet. Er det en tabel, så sætter man rammer på alle celler, også dem man havde tænkt sig skulle være usynlige, så man kan se hvor alle felter ligger.

Du har nu sigtelinjer til at flytte dine felter med lodret tekst efter, og den omkringliggende tekst flytter ikke rundt under din lodrette tekst. Du kan nu i ro og mag prøve dig lidt frem med forskydning i x-y-planet, til tekstfelterne er centreret over de korrekte afmærkninger (for alle browsere). Når det er klaret, fjerner man de rammer der kun er sigtelinjer.