Schriftverlauf vertikal

[Tom123]

Guten Morgen,

kann man mit CSS eigentlich einen vertikalen Schrfitverlauf bestimmen. Also quasi die Schrift im +/- 90° gedreht?

So etwa (nur die Buchstaben auch noch gedreht):

T
e
s
t

Grüße
Tom123

[Gunnar Bittersmann]

@@Tom123:

kann man mit CSS eigentlich einen vertikalen Schrfitverlauf bestimmen. Also quasi die Schrift im +/- 90° gedreht?

Schrift vertikal?
Schrift um 90 Grad rotieren

Du kannst mal testen, ob inzwischen mehr Browser dies unterstützen. Ansonsten bleibt vorerst weiterhin nur eine Textgraphik.

Live long and prosper,
Gunnar

[Matze]

Hallo!

kann man mit CSS eigentlich einen vertikalen Schrfitverlauf bestimmen. Also quasi die Schrift im +/- 90° gedreht?

Schrift vertikal?
Schrift um 90 Grad rotieren

Du kannst mal testen, ob inzwischen mehr Browser dies unterstützen. Ansonsten bleibt vorerst weiterhin nur eine Textgraphik.

Es sollte auch mit Java-Script möglich sein.
Ob der Aufwand den Nutzen rechtfertigt müsste man allerdings genau bedenken.
Bei großen Mengen an Text bei der man wegen der Dateigröße einer Alternativ-Grafik und der Länge des alt-Attributs Grafiken vermeiden sollte, könnte JS durchaus eine Rolle spielen.

Grüße, Matze

[Tom123]

Danke für die Ideen. Werde das mal ausprobieren.

@Matze: Es geht eigentlich nur um <tr> Text einer Tabelle mit vielen Spalten.

[suit]

@Matze: Es geht eigentlich nur um <tr> Text einer Tabelle mit vielen Spalten.

was hat ein tr mit vertikaler beschriftung zu tun?

oder sind die spalten so schmal, dass sich horizontaler text nicht sinnvoll einfügen lässt?

alternativ gibts noch die möglichkeit, folgendes zu produzieren

<span>f</span><span>o</span><span>o</span><span>b</span><span>a</span><span>r</span>

mittels display: block und text-align: center auf die span-elemente ist der text dann zumindest vertikal, wenngleich die schriftzeichen nicht gedreht sind

[Matze]

Hallo!

oder sind die spalten so schmal, dass sich horizontaler text nicht sinnvoll einfügen lässt?

Davon geh ich beim OP aus. Normalerweise ist das auch der einzige Grund so etwas zu zu wünschen.

alternativ gibts noch die möglichkeit, folgendes zu produzieren(...)

<ironie>
Oder mehrere Zeilen mit fester Höhe und definierten Hitergrundbildern die horizontal gekippt wurden.
</ironie>

Nee nee, so kompliziert muss es doch nicht sein.

(...) wenngleich die schriftzeichen nicht gedreht sind

Genau darum ging es beim OP aber.

Grüße, Matze

[suit]

Genau darum ging es beim OP aber.

ist mir klar ;) aber ggf. ist eine kompromisslösung auch ok :D

[Mega]

<span>f</span><span>o</span><span>o</span><span>b</span><span>a</span><span>r</span>

Wozu eigentlich diesen Aufwand?
Ein Leerzeichen zwischen den Buchstaben reicht. Dann den Zeilenumbruch entsprechend setzen und die Breite so wählen, dass nur ein Buchstabe platz hat.

[Gunther]

Wozu eigentlich diesen Aufwand?
... und die Breite so wählen, dass nur ein Buchstabe platz hat.

Welcher denn? Ein 'I' oder ein 'W', oder ...?

Gruß Gunther

[suit]

Welcher denn? Ein 'I' oder ein 'W', oder ...?

mit der richtigen schriftart geht das schon ;)
SCNR

[Gunther]

Welcher denn? Ein 'I' oder ein 'W', oder ...?

mit der richtigen schriftart geht das schon ;)
SCNR

Schon OK! ;-)
Nur dann sollte man das auch dazu schreiben, dass man in diesem Fall eine nichtproportionale Schriftart verwenden muss, damit es funktioniert.

Gruß Gunther

[Ingo Turski]

Hi,

<span>f</span><span>o</span><span>o</span><span>b</span><span>a</span><span>r</span>

Wozu eigentlich diesen Aufwand?
Ein Leerzeichen zwischen den Buchstaben reicht.

nein, der Aufwand hat schon sein Berechtigung, denn "foobar" ist etwas völlig anderes als "f o o b a r". Denk' an Screenreader und Suchmaschinen.

freundliche Grüße
Ingo

[Harlequin]

Yerf!

Ansonsten bleibt vorerst weiterhin nur eine Textgraphik.

Hm, da war doch mal was mit in SVG eingebundenem HTML ;-)

Gruß,

Harlequin

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

Du kannst mal testen, ob inzwischen mehr Browser dies unterstützen.

Oder auch nicht. 'writing-mode', 'direction', 'block-progression' [CSS3-TEXT:2003 §3.2] und 'glyph-orientation-vertical', 'glyph-orientation-horizontal' [CSS3-TEXT:2003 §3.3] sind ab der nächsten Version [CSS3-TEXT:2005] nicht mehr enthalten.

“Sections relating to text layout (vertical text, grids, 'text-combine') will be moved to a separate Text Layout module. These features may change greatly from the last revision, but they have not been dropped.” [CSS3-TEXT:2005 §8] Auch in der aktuellen Version [CSS3-TEXT:2007] nichts neues dazu. [CSS3-TEXT:2007 §10]

Mit dem Modul Text Layout scheint’s aber nicht so recht vorwärts zu gehen. [CURRENT-WORK]

Live long and prosper,
Gunnar