Zum Inhalt springen

Vertikaler Text


slomoman

Empfohlene Beiträge

Ich möchte in meiner Web App. den Text in den Spaltenköpfen einer Tabelle vertikal anzeigen (also um 90°) gedreht.

Es gibt das CSS Attribut "writing-mode: tb-rl", aber das scheint nur im IE zu funktionieren. Gibt es noch andere Möglichkeiten?


<style type="text/css">

.verticaltext{

  writing-mode: tb-rl;

}

</style>

Link zu diesem Kommentar
Auf anderen Seiten teilen

also mir ist kein stadard-attribut bekannt, dass sowas unterstützt.

Ich kenn nur "direction", aber da kann man nur auf "von rechts nach links" umstellen.

Ich würde mal spontan behaupten, dass die browserübergreifend nichts anderes übrig bleibt, als den Text untereinander anzuordnen (<p> oder so) und dann die Astände so gering zu machen, dass es aussieht, als wäre es vertikaler Text.

Aber warum überhaupt vertikaler Text. Dahinter verbirgt sich doch wahrscheinlich kein sich verändernder Text, den der Bentutzer lesen muss,o der? Vielleicht reicht es für deinen Zweck ja auch das ganze als Bild vorzubereiten.

Link zu diesem Kommentar
Auf anderen Seiten teilen

also richtig gedrehter Text.

da wirst du mit standardisierten CSS-Mitteln nie hinkommen.

ein Lösungsansatz:

Du machst Bilder für jeden einzelnen 90Grad gedrehten Buchstaben und parst in deiner Server-Scriptsprache die Ausgabe so, dass du die einzelnen Chars durch die entsprechenden Bilder ersetzt.

Vorteil: Du bist aufjedenfall kompatibel zu allem.

Ich weiß nicht, ob man mit JScript Objekte zufällig um 90Grad drehen kann. Das wäre dann eine zweite Möglichkeit.

Link zu diesem Kommentar
Auf anderen Seiten teilen

es ist möglich :


<!-- This DIV is the target container for an image. -->
<DIV ID="oDiv" STYLE="position:absolute; left:270px;" >
*dein TEXTFELD *
</DIV>
<BUTTON onclick="oDiv.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'">
Rotate 270 degrees</BUTTON><BR/>
<BUTTON onclick="oDiv.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'">
Rotate 270 degrees</BUTTON><BR/>
<BUTTON onclick="oDiv.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'">
Rotate 270 degrees</BUTTON><BR/>
<BUTTON onclick="oDiv.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=4)'">
Rotate 270 degrees</BUTTON><BR/>
<BUTTON onclick="oDiv.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=5)'">
Rotate 270 degrees</BUTTON><BR/>
<BUTTON onclick="oDiv.style.filter=''">Clear Filter</BUTTON><BR/>

[/PHP]

rota tion ist ein Bug des Forums, es wurde zusammengeschrieben gepostet

Link zu diesem Kommentar
Auf anderen Seiten teilen

Das sieht man mal wieder will toll sich *** an die Standarts hält -.-

Kein Wunder, das das unter anderen Browsern nicht funzt.

sorry, aber dieser off-topic kommentar muss sein:

was hat das mit "an den standard halten" zu tun? Es ist doch gut, wenn die Browser-Entwickler zusätzliche Features neben dem Standard einbauen. der IE verletzt damit ja keinen Standard. Dadurch gibt es vielmehr die Chance, dass immer neue mehr oder weniger tolle Features in den Standard mit aufgenommen werden.

Die Grundlagen ziemlich vieler heute bekannter HTML-Features sind durch den Vorstoß einzelner Browser in den Standard gerutscht (z.B. früher framesets durch netscape).

Link zu diesem Kommentar
Auf anderen Seiten teilen

allerdings währe es sinnvoller es erst dem Standard Vorzuschlagen, und erst danach einzubauen. Sonst maulen IE nutzer wieder rum das es in anderen browsern nicht geht. Oder besser noch, man muss wieder browserweichen einbauen. Weil die MS-Krücke es anders macht, als nachher der Standard.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Es ist doch gut, wenn die Browser-Entwickler zusätzliche Features neben dem Standard einbauen.

[...]

Die Grundlagen ziemlich vieler heute bekannter HTML-Features sind durch den Vorstoß einzelner Browser in den Standard gerutscht (z.B. früher framesets durch netscape).

Was dadurch dann passiert, sieht man (bzw. sah man) damals, als es den berühmt-berüchtigten Browserkrieg IE/Netscape gab. Jeder Hersteller baute irgendeine Funktion in seinen Browser ein, weil er das besonders toll und unverzichtbar fand und die, die die Seiten machten mussten sich dann mit Workarounds und Browserweichen etc. rumschlagen, damit die Seite auch überall richtig funktioniert (bzw. die Hersteller versuchten damit Leute für ihren Browser zu gewinnen, weil andere ja z.B. keinen tollen blinkenden Text darstellen können).

MS ist Mitglied des w3c und hat damit schon Einfluss auf die Entwicklung, nur eben nicht allein (war Netscape damals ja auch). Mit dem Einbauen von "Features" wird versucht, die Entscheider über Standards vor vollendete Tatsachen zu stellen und ob es so toll war, dass Framesets in den Standard gerutscht sind, darüber kann man auch lange Diskussionen führen ;)

EDIT: Ausserden geht es hierbei nichtmal nur um den Standard... was da aufgerufen wird sind DirectX Funktionen, und die gibt es nicht nur bei keinem anderen Browser, sondern auch auf keinem anderen Betriebssystem.

Link zu diesem Kommentar
Auf anderen Seiten teilen

EDIT: Ausserden geht es hierbei nichtmal nur um den Standard... was da aufgerufen wird sind DirectX Funktionen, und die gibt es nicht nur bei keinem anderen Browser, sondern auch auf keinem anderen Betriebssystem.


<style type="text/css">

.verticaltext{

  writing-mode: tb-rl;

}

</style>

Nicht ganz directx, aber egal. wahrscheinlich leitet der IE das intern auf die gleichen funktionen um ;).

Ich bleibe trotzdem bei meiner Meinung, dass gegen zusätzliche funktionalitäten nichts einzuwenden ist, solange sie den standard nicht verletzen. man muss sie ja nicht benutzen, wenn man standardkonform bleiben will und keine browserweichen haben will. aber lassen wir es damit einfach bewenden.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...