[HTML] Text hochkant (vertikal) schreiben??

[FreshPhil]

Hi,
ich komme einfach nicht drauf! Mein Problem:
Ich bräuchte den Befehl, mit dem es möglich ist, einen Text vertikal zu schreiben.
Realisieren will ich das dann so, dass neben einem eingeblendeten Werbebanner auf meiner Seite links daneben steht: Advertising. Jedoch eben hochkant, so dass es keinen Platz wegnimmt.
Ich denke ihr wisst was ich meine

[Günni]

mach hinter jedem Buchstaben ein <br>

[FreshPhil]

Hi,
sorry, ich seh schon, ich habe zu wenig erklärt
Also ich meine so, dass die Buchstaben ebenfalls um 90° nach links gedreht sind. Und es von der Größe ungefähr dem Banner entspricht, also dass die Schriftlänge quasi nicht größer ist als die Höhe des Werbebanners. (<- aber das ist dann wahrscheinlich mein Problem und nich mehr schwer)
Im angehängten Bild ist das, was ich meine, denke ich gut ersichtlich!

[TobiaZ]

das macht man ganz einfach mit nem bild. afaik geht das in CSS nicht und in HTML erst recht nicht.

[FreshPhil]

Ok, thx

[Abraxax]

Original geschrieben von TobiaZ
das macht man ganz einfach mit nem bild. afaik geht das in CSS nicht und in HTML erst recht nicht.

falsch. in css geht das. aber leider nicht in jedem browser.

[Pulsar1365]

SVG

Es geht auch ohne CSS, mit SVG nämlich (Scalable Vector Graphic):

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="20" writing-mode="tb-rl"> SVG </text>
</svg>

Das ist die Datei, die "SVG" hochkant ausgibt. Du speicherst sie z.B unter dem Namen "test.svg". Um sie in deiner HTML-Seite einzubinden gibst du dann Folgendes ein:

<object data="test.svg" width="500" height="500" type="image/svg+xml">
<embed src="test.svg" width="500" height="500" type="image/svg+xml" />
</object>

Der Vorteil von SVG ist, dass du nicht für jeden Text ein extra Bild brauchst und auf den Text über das DOM mit javascript ändern kannst. Das geht zwar mit CSS auch, aber SVGs kann man animieren , sodass sich der Text interaktiv ändert.

Die SVG-Datei hab ich von http://www.selfsvg.info/?section=5.3 Die Methode zum Einbetten kannst du auf http://www.aboutwebdesign.de/awd/con...25537997.shtml nachlesen.
Es gibt aber momentan noch ein Problem: Der Internetexplorer unterstützt das SVG-Format nur, wenn der Adobe SVG-Viewer installiert ist. Und dann funktioniert die Einbettmethode noch nicht. Und beim Firefox funktioniert zwar die Einbettmethode, aber der Text wird nicht vertikal dargestellt, sondern von rechts nach links.
Trotzdem finde ich die SVGs super. Es dauert nur noch einige Zeit bis sie praxisreif sind.

[Pulsar1365]

Es funktioniert, wenn du die Datei einbindest (zumindest im Firefox):

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<text transform="rotate(90, 10, 10)"> SVG </text>
</svg>