Dr. O. Hoffmann
Die nützlichsten Bücher sind die, die den Leser anregen, sie zu ergänzen.
Voltaire
text und EigenschaftentspantextArea und tbreaktextPathtrefText kann mit SVG natürlich auch dargestellt werden. Allerdings ist nach wie vor XHTML dafür das optimale Format, einmal abgesehen von sehr wenigen Ausnahmen wie konkreter Poesie, wo es einen starken Bedarf an graphischen Aspekten gibt, siehe dazu auch den Teilbereich 'Ausgedichtet' dieses Projektes. SVG 1.1 verfügt nicht über Zeilenumbruch oder Wörtertrennung. All das liegt allein in der Verantwortung des Autors. Text ist in SVG eher wie ein Graphikelement ähnlich einem Rechteck oder einem Kreis zu betrachten, nicht wie in XHTML als Fließtext. Zu empfehlen ist daher ein sparsamer Einsatz von Fließtext in SVG und die Kombination mit XHTML, wenn Text automatisch formatiert werden soll. Dafür sind erstmals in SVG Tiny 1.2 ebenfalls Mechanismen verfügbar geworden. Das ist aber nicht mit den Möglichkeiten von XHTML vergleichbar oder gar mit den semantischen Möglichkeiten von LML, denn Elemente in SVG, die dazu dienen, Text als Graphik darzustellen, haben keine semantische Bedeutung. Die ist bei Bedarf mit anderen Formaten zu ergänzen.
text und Eigenschaften
Das Basiselement ist das text-Element. Dieses
umschließt den Text, in der Zeile können weitere Formatierungen mit dem
tspan-Element (nicht in tiny 1.1) vorgenommen werden und durch Neupositionierung auch
sehr indirekt ein Zeilenumbruch.
Die absolute Textposition wird mit den Attributen x und y
angegeben. Der Bezugspunkt kann mittels der Eigenschaft text-anchor festgelegt
werden. Bei start ist es die Position des ersten Buchstaben oder besser Glyphen, bei end
die des letzten. middle gibt an, daß der Bezugspunkt mittig zum dargestellten Text liegt.
x und y können eine ganze Liste von
Koordinaten enthalten, die beziehen sich dann jeweils auf den jeweiligen Glyphen. Gibt es mehr Koordinaten als
Glyphen, werden die überzähligen Koordinaten ignoriert. Ist es umgedreht, werden die
überzähligen Glyphen an den letzten positionierte Glyphen angehängt. Die Unterscheidung von
Glyphen und Buchstaben ist hier bei der Zählung vor allem relevant, wenn die verwendete Schriftart Ligaturen
enthält, die zählen dann als ein Glyph, auch wenn sie im Quelltext als zwei Buchstaben stehen.
SVG 1.1 hat noch deutlich mehr Eigenschaften zur Anordnung, auf die hier nicht eingegangen
wird, auch zur Festlegung der Schreibrichtung sind Eigenschaften vorhanden.
Das folgende Beispiel zeigt ein einfaches Gedicht, verwendet wird neben einem Rechteck als Hintergrund nur
das Element text mit ein paar Attributen:
Gedicht A-Z
(Quelltext zum Gedicht A-Z).
Das kann technisch noch stark verbessert werden, dient hier nur als simples Einstiegsbeispiel.
Mit dem Attribut rotate wird der Glyph um seine aktuelle Position im Text gedreht.
Auch das kann eine Liste sein. Unproblematisch ist eine Liste mit exakt einem Winkel und mit wenigstens so vielen
Winkeln, wie Glyphen vorhanden sind. Der Fall mit weniger Winkeln als Glyphen ist als problematisch einzuordnen,
weil der in SVG Tiny 1.2 etwas anders definiert ist als in SVG 1.1 und es für
letzteres auch eine vorgeschlagene Änderung des Verhaltens wie in 1.2 gibt, wobei man nicht erwarten kann,
daß sich bereits veröffentlichte Programme um solche Vorschläge kümmern können,
weshalb man die Situation als Autor in den nächsten Jahren unbedingt meiden sollte. Kurzum, die neuere
Regelung besagt, daß der letzte Winkel auf alle überzähligen Glyphen anwendbar ist, die alte
Regelung besagt, daß das nur bei exakt einem angegebenen Winkel so ist. Die neuere Regelung scheint zwar
sinnvoller zu sein, kommt aber leider ein paar Jahre zu spät für diverse Programme.
Wichtige Eigenschaften zur Auswahl der Schriftart sind von CSS übernommen worden,
etwa font-family, font-style, font-weight und font-size,
letztere bezieht sich dann immer auf das lokale Koordinatensystem.
Aufgrund der anderen Darstellungsweise und der Skalierbarkeit in SVG ist es
anders als für XHTML in der Regel sinnvoll, die font-size
in lokalen Koordinateneinheiten anzugeben, nicht in relativen Einheiten. Auch darin zeigt sich, daß es sich
bei Text in SVG um Graphik handelt, nicht um freien Fließtext.
Bei SVG 1.1 und SVG Tiny 1.2 kommt noch die Eigenschaft
font-variant hinzu, die es in SVG tiny 1.1 nicht gibt.
SVG 1.1 stellt ferner noch bereit: font-size-adjust und font-stretch. Ferner gibt es Eigenschaften zur Dekoration und zum
Abstand zwischen den Glyphen.
Einfaches Beispiel für Text als Graphik:
Text mit SVG
(Quelltext zu Text mit SVG).
Anmerkung: So ganz richtig und vollständig habe ich das Beispiel weder beim adobe-plugin,
noch bei Opera 8/9 noch bei KSVG 1 noch beim SVG-Mozilla gesehen. Ich meine,
bei Batik/Squiggle ist es richtig.
Einige Eigenschaften sind jedoch nicht in tiny oder basic definiert. Ein weiterer Grund, warum man
mit Text in SVG vorsichtig umgehen sollte. Drehungen sollten eher mit den im
Menüpunkt 'Transformationen' beschriebenen Transformationen durchgeführt werden.
tspan
In SVG Tiny 1.2 hat das Element tspan nur Eigenschaften oder
Präsentationsattribute, und die Attribute x,
y und rotate sind dort nicht
vorgesehen, in SVG 1.1 schon. Dort gelten besondere Regeln, wenn sowohl das
Elternelement als auch das tspan die Attribute angeben.
SVG 1.1 bietet ferner für text und tspan
die Attribute dx, dy und
textLength und lengthAdjust.
Erstere beide dienen der relativen Positionierung
von Glyphen analog zur aktuellen Textposition mit entsprechenden Regeln für Listen, letztere beide
dienen dazu, das Ergebnis der Textlänge des Darstellungsprogrammes an die Berechnung des
Autors anzupassen, denn oft wird das Darstellungsprogramm nicht exakt die gleiche Schriftart
verfügbar haben wie der Autor. textLength hat einfach die
selbst berechnete Länge des Textes als Wert. lengthAdjust
hat entweder den voreingestellten Wert spacing oder spacingAndGlyphs.
Im ersteren Falle wird zur Korrektur nur der Abstand zwischen zwei Glyphen modifziert, im letzteren
Falle wird die Breite der Glyphen zusätzlich angepaßt.
Obiges Gedicht mit SVG 1.1 statt tiny 1.1 notiert, bietet schon ein paar
mehr Möglichkeiten, den Text zu strukturieren, etwa verwendet man text
für die Strophen und darin tspan für die Zeilen:
Gedicht A-Z (2)
(Quelltext zum Gedicht A-Z (2)).
Dafür darf man dann die Textposition für jedes tspan erneut komplett
angeben. Mittels des Attributes class wurde zudem notiert, was der
Inhalt zu bedeuten hat. Da die Werte von class allerdings nahezu
beliebig sein können, ist diese Variante vor allem nützlich, um per CSS
den Text zu dekorieren, die Kennzeichnung der semantischen Funktion der Inhalte ist so nur
für Menschen ersichtlich, nicht für Programme.
textArea und tbreak
SVG tiny 1.2 bietet die Elemente textArea und tbreak,
um Text automatisch umzubrechen. Die beiden Elemente entsprechen grob den XHTML-Elementen
div und br.
Damit kann man sich bei unserem Gedichtbeispiel immerhin die lästige manuelle Anordnung der Zeilen
sparen:
Gedicht A-Z (3)
(Quelltext zum Gedicht A-Z (3)).
Dafür sind dann bei dieser Variante die Zeilenumbrüche mit tbreak zu markieren,
bei größeren Abständen zwischen den Strophen dann auch doppelt, weil es ja neben dem
semantisch bedeutungslosen tspan kein weiteres Element zur semantischen
Strukturierung des Inhaltes gibt.
Zur semantischen Strukturierung des Inhaltes bietet SVG tiny 1.2 allerdings spezielle Attribute,
die von RDFa übernommen wurden,
für unsere Zwecke reicht hier das Attribut property oder alternativ
role (von WAI-ARIA übernommen)
zusammen mit der Angabe von Elementen im Namensraum einer semantisch
reichhaltigen Sprache wie LML:
Gedicht A-Z (4)
(Quelltext zum Gedicht A-Z (4)).
Der Namensraum von LML wird einfach im Element svg festgelegt und dann
innerhalb von property oder role als
Abkürzung im Attributwert verwendet. Namensraumangabe zusammen mit dem restlichen Attributwert
hinter dem Doppelpunkt ergibt eine gültige URI der Definition des semantisch
relevanten Elementes von LML. Damit repräsentiert das SVG-Element
mit diesem Attribut und diesem Wert das jeweilige Element von LML.
Sofern das Darstellungsprogramm LML kennt, ist die semantische Bedeutung somit eindeutig
und automatisch vom Programm identifizierbar.
Nützlicher ist textArea natürlich für Prosa, wie etwa folgende Kurzgeschichte:
Kurzgeschichte Die andere Welt
(Quelltext zur Kurzgeschichte Die andere Welt).
Nachvollziehbar sind diese neuen Elemente zum Beispiel mit Opera ab Version 9.50.
textPath
Text kann in SVG 1.1 auch entlang eines Pfades angeordnet werden, dazu dient
das Element textPath, welches wie tspan innerhalb von
text auftreten kann. Mittels xlink:href wird
der Fragmentidentifizierer des Pfades angegeben, entlang dessen der Text angeordnet werden
soll. Ist der Pfad zuende, werden überstehende Glyphen nicht dargestellt.
Mittels startOffset wird die Startposition entlang des Pfades angegeben.
Hier sind oft Prozentangaben nützlich, 0% ist offenbar der Beginn des Pfades, 100%
das Ende.
Um unbeabsichtigtes Verschwinden von Text zu vermeiden oder um ein beabsichtigtes Verschwinden
gezielt zu erreichen, kann mit textLength und
lengthAdjust wieder angegeben werden,
wie lang der Text nach eigener Berechnung ist, ein entsprechendes Attribut
pathLength gibt es auch für die Kurve.
Mit method wird angegeben, wie die Glyphen dargestellt werden.
beim voreingestellten Wert align bleibt die Form des Glyphen erhalten, er wird nur an
die jeweilige Stelle der Kurve transformiert. Mit dem Wert stretch wird der Glyph so
deformiert, daß die transformierten Abstände zwischen den Glyphen gleichmäßig
erhalten bleiben, dazu werden die Glyphen deformiert entsprechend der Krümmung der Kurve.
Mit dem Attribut spacing wird festgelegt, wie der Abstand zwischen
den Glyphen bestimmt wird. Mit dem voreingestellten auto soll eine optimal aussehende
Darstellung erzielt werden. Mittels exact wird eine im Detail in der Spezifikation definierte
Methode verwendet, wie der Abstand zwischen zwei Glyphen entlang eines Pfades zu bestimmen ist.
Mittels tspan innerhalb von textPath kann etwa die relative
Position nochmal verändert werden oder andere Eigenschaften für ein Fragment angegeben
werden, etwa eine andere Farbe oder Schriftgröße oder Dekoration.
Einfaches Beispiel für Text auf einem Pfad
(Quelltext zum einfachen Beispiel für
Text auf einem Pfad).
Und noch ein etwas fortgeschritteneres Beispiel, welches zudem auch schon Farbverläufe und Animationen
enthält, zeigt eine praktische Anwendung von textPath:
Gedicht Was der Knabe zuhause verschwieg
(Quelltext zum Gedicht Was der Knabe zuhause verschwieg).
tref
Ein weiteres Element in SVG 1.1 ist tref, damit kann der Textinhalt
anderer Textelement wiederverwendet werden, also ohne weitere Attribute, Eigenschaften und eventuell
Markierungen von Kindelementen. Nützlich ist das etwa bei der Animation von Textinhalten, aber auch,
wenn sich in einem Dokument Beschriftungen oder Überschriften wiederholen. So muß bei einer
Änderung der Text nur einmal modifiziert werden. tref selbst enthält keinen
weiteren Text, kann aber in text, tspan und textPath
verwendet werden. Mittels xlink:href wird der Fragmentidentifizierer des
wiederzuverwendenden Textfragmentes angegeben. Ansonsten hat tref die gleichen
Attribute wie tspan.
In einer kleinen Abschweifung in die Animationen hier eine Animation mit einem digitalen
Zähler
(Quelltext zum Zähler).
Das kann natürlich leicht zu einer digitalen Stoppuhr oder Uhr erweitert werden.
Mittels des Attributes text-rendering kann in SVG 1.1
eine Optimierung der Anzeige eingestellt werden.
Es gibt die Werte auto, optimizeSpeed, optimizeLegibility,
geometricPrecision (und inherit). Wie die Werte schon andeuten, geht
es um Optimierung hinsichtlich einer zügigen Darstellung, der Lesbarkeit oder der Präzision von
Kurvenstücken in Glyphen. auto versucht einen Mittelwert zu erreichen unter leichter
Bevorzugung der Lesbarkeit. Mit optimizeLegibility kann man etwa betonen, daß
anti-aliasing und ähnliches eingesetzt werden soll, um die Lesbarkeit zu verbessern.
Mittels inherit wird die Eigenschaft vom Elternelement übernommen
(wie immer bei inherit), was als explizite Angabe meist nur von Bedeutung ist,
wenn man einen gesetzten Wert wieder überschreiben will, etwa mit CSS eine
XML-Angabe. Voreinstellung ist auto.
Ferner gibt es einen ganzen Satz von Elementen und Attributen, um eigene Schriftarten zu definieren. Dies kann dann für die graphische Darstellung von Text in SVG oder auch durch Referenzierung zusammen mit CSS bei anderen Formaten verwendet werden. Die Glyphen selbst werden mit den üblichen SVG-Pfaden definiert. Anders als bei einigen anderen verbreiteten Formaten, die speziell diesem Zweck dienen, können somit in SVG auch kubische Kurven oder gar elliptische Bögen verwendet werden.
Ein ausführlicherer Artikel von mir zur Verwendung und zur Implementierung von Text in SVG mit
einigen Beispielen, derzeit nur in englischer Sprache verfügbar, erläutert auch genauer die Funktion
von weiteren Elementen, die Text enthalten können, besonders auch um den Inhalt einer Datei
verständlicher zu machen, zu den Elementen gehören die bereits oben angesprochenen
title und desc, aber auch metadata und Attribute wie
xlink:title, xlink:role und
xlink:arcrole. Zudem enthält der Artikel auch Beispiele zur Verwendung
von dargestellten Textelementen wie etwa Text entlang eines Pfades oder referenzierter Text:
Text in SVG. Hilfreich mag der ebenfalls und in deutscher
Sprache hier im Hilfebereich verfügbare Artikel 'Ausgedichtet' sein, der sich sowohl mit
Textauszeichnung von Gedichten in XHTML beschäftigt als auch mit Gedichten in
SVG.
