Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 78
Zur Übersicht

78. Writing-Mode im IE 5.5+ bzw. in SVG (18.01.2002)

CSS3 soll eine CSS-Eigenschaft Writing-Mode bereit stellen. Damit kann für Texte auch eine vertikale Leserichtung angegeben werden. Mögliche Werte sollen u. a. sein: lr-tb | rl-tb | tb-rl (l=left, r=right, t=top, b=bottom). Im Moment ist das noch graue Theorie, aber man kann bereits jetzt – zumindest ansatzweise – damit experimentieren. Der Internet Explorer ist an dieser Stelle seiner Zeit etwas voraus und hat ab Version 5.5 diese (noch proprietäre) Eigenschaft an Bord. Im Beispiel 78 werden die Kopfzeilen einer Tabelle vertikal beschriftet:

      
      TH.tbrl
      {
      Writing-Mode: tb-rl;
      Color: #F00;
      Font-Weight: bold;
      }
Zur praktischen Anwendung im Web eignet sich das noch nicht, aber bei Intranet-Applikationen sieht das anders aus. Zudem ist diese Eigenschaft dann doch nicht so weit hergeholt, denn in der im September 2001 verabschiedeten Spezifikation der Scalable Vector Graphics (SVG), ist ebenfalls diese Style-Eigenschaft vorhanden und kann also in diesem Umfeld eingesetzt werden, siehe den folgenden Code und die Abbildung.


      <?xml version="1.0" encoding="iso-8859-1"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
       "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

      <svg>
        <rect x="5" y="5" width="400" height="250" style="fill: #FFC;
         stroke: #00C; stroke-width: 2px"/>
        <text x="30px" y="40px" style="fill: #000; font-size: 18px">
        Die Style-Eigenschaft writing-mode in SVG</text>
        <text x="140px" y="80px" style="fill: #00F; font-size: 16px;
         writing-mode: lr-tb"> Testtext mit lr-tb</text>
        <text x="200px" y="110px" style="fill: #F00; font-size: 16px;
         writing-mode: tb-rl">Testtext mit tb-rl</text>
      </svg>
Browserdarstellung zum Beispiel 78


Zur Anzeige der eingebetteten SVG-Datei wird der SVG Viewer von Adobe benötigt. Mehr SVG-Stoff mit einer Demonstration der wesentlichen Objekte und Effekte bietet Tipp 79.