Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Vertikaler Text

Empfohlene Antworten

Veröffentlicht

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>

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.

Doch, der Text ist veränderlich und kommt aus ner datenbank.

Ich habe halt insgesamt ne recht große Tabelle mit vielen Zeilen UND Spalten. Die Spaltennamen sind recht lang, d.h. wenn ich vertikales Scrollen verhindern will, muss ich versuchen, die Spaltenköpfe schmal zu halten....

char.<BR> in FOR packen und mit CSS den Abstand zwischen den Zeilen minimieren ...

es besteht aber ein unterschied zwischen um-90°-gedrehtem Text und übereinandergeschriebenem Text. Das zweite finde ich recht schwer zu lesen, wenn die Gesamtbreite schmal wird.

Od

er

wa

s

de

nkt

ihr

?

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.

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

Und damit hat er genaus das erreicht, was sowieso schon funktioniert. Die richtige Darstellung im IE. Nix Mozilla, nix Opera, eben nur IE. Na gut, vielleicht noch Netscape 8 mit IE-Rendering. Weiss ich aber nicht.

argh, ja testen sollte man dies schon ... sorry ... nehme alles zurück

argh, ja testen sollte man dies schon ... sorry ... nehme alles zurück


oDiv.style.filter=

        'progid:[b]DXImageTransform.Microsoft[/b].BasicImage(rotation=5)'

Allein diese Zeile sollte einen schon stuzig machen ;) auch ohne Testen

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

Kein Wunder, das das unter anderen Browsern nicht funzt.

Mach das am besten mit Bildern ;-)

Kommt aber mit CSS3:

http://www.w3.org/TR/2003/CR-css3-text-20030514/#GlyphOrientation

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).

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.

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.

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.

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.