Darstellung entweder Zeilenweise oder spaltenweise

[Adam]

Hallo zusammen,

ich suche eine Lösung für mein Darstellungsproblem von Zahlen. In einer dynamischen Tabelle sollen die "von - bis" werte entweder Zeilenweise oder Spaltenweise dargestell werden. Beispiel:

Wenn die Zelle breit genug ist, dann: 100 - 600

Wenn die Zelle zu schmall ist, dann:

100

−

600

Im Moment wird willkürlich so umgebrochen:

100 −

600

Vielen dank für Ihre Vorschläge im Vorraus.

[Gunnar Bittersmann]

@@Adam

In einer dynamischen Tabelle sollen die "von - bis" werte entweder Zeilenweise oder Spaltenweise dargestell werden.

Ich glaube nicht, dass du da um einen media query drumrumkommst.

<td>
	<span class="min">100</span>&ndash;<span class="max">600</span>
</td>

@media (max-width: 21em)
{
	.min, .max { display: block }
}

Der Breakpoint richtet sich nach deinen Gegebenheiten (u.a. Anzahl der Spalten).

Es sei denn, man schaut mit JavaScript, wie es passt. Dazu müsste man aber mehr über deine Tabelleninhalte wissen.

LLAP 🖖

[Adam]

Hallo und Danke für eure Lösungvorschläge.

Die Anzahl der Spalten kann zwischen 1 und 8 variieren. und die Werte können 1 bis 6 stellig sein. Also ich denke um das Ausrechnen der Breite (des Textes und des Feldes) komme ich irgendwie nicht herum. Media bezieht sich ja immer nur auf das Device

Gruß Adam

[Gunnar Bittersmann]

@@Adam

Media bezieht sich ja immer nur auf das Device

Nein, auf den Viewport. Das Browserfenster muss ja nicht die gesamte Bildschirmbreite einnehmen; es können im Browser noch Seitenleisten eingeblendet sein; …

Also ich denke um das Ausrechnen der Breite (des Textes und des Feldes) komme ich irgendwie nicht herum.

Doch. Indem du die Höhe ermittelst. Scheint mir sinnvoller: Wenn die Höhe größer ist als die Zeilenhöhe, hast du zwei Zeilen, dann willst du die vertikale Darstellung.

Die Höhe der Tabellenzelle hilft dir da nicht weiter, wenn außer den Von-bis-Dingern noch andere Inhalte in der jeweiligen Tabellenzeile sind. Also in den tds für die Von-bis-Dinger noch ein zusätzliches Element, sagen wir mit class="range".

Ich hab da mal was gebastelt.

Die Funktion styleRanges() wird initial aufgerufen sowie bei jeder Änderung des Viewportgröße (also auch beim Drehen des Handys oder Tablets).

Darin werden alle Tabellen auf der Seite durchgegangen. (Wenn du garantiert nur eine solche hast, kannst du das vereinfachen). Innerhalb jeder Tabelle wird der Schwellenwert ermittelt: ich hab zur Sicherheit die anderthalbfache Zeilenhöhe gewählt. Dann werden alle .range-Elemente durchgegangen und geprüft, ob deren Höhe größer ist als der Schwellenwert. Wenn ein solches gefunden wird, bekommt die Tabelle die Klasse narrow und die Schleife wird beendet. Den Rest erledigt CSS.

(Ich bin davon ausgegangen, dass die Darstellung aller Von-bis-Dinger gleich sein soll; also wenn eins vertikal, dann alle anderen auch.

Weiterhin bin ich davon ausgegangen, dass bei allen .range-Elementen dieselbe Schriftgröße und Zeilenhöhe verwendet wird. Sollte das nicht der Fall sein, nicht einmalig den Schwellenwert ermitteln, sonden innerhalb der Schleife für jedes .range-Element gesondert.)

Das CSS erledigt auch die schon angesprochene Drehung des Bis-Strichs.

LLAP 🖖

[ursus contionabundo]

Du hast:

<td>100 - 600</td>

Das müsstest Du wohl ändern:

<td><span class="tdbreak">100</span><span class="tdbreak">-</span><span class="tdbreak">600</span></td>

Im CSS dann ein Media-Query:

span.tdbreak {
   display:inline;
}

@media (max-device-width: 70em) {
   span.tdbreak {
       display:block;
       width:100%;
       padding:0;
       margin:0;
       text-align:center;
   }
}

Den Wert der Breite des Ausgabeports ( des Browser-Fensters ) bei dem Du umbrechen willst musst du selbst herausfinden. Und nimm dort nicht etwa Pixel...

Freilich kannst Du auch versuchen:

<style>
span.nobreak {
    white-space: nowrap
}
</style>

<td>100<span class="nobreak">&nbsp;-&nbsp;</span>600</td>

notieren. Das funktioniert aber nur wenn die Zahlen höchstens dreistellig sind, genauer genommen höchstens so breit dargestellt werden wie das Minus-Zeichen und die beiden No-Breaking-Spaces.

Hinweise:

• Vielleicht findest Du in veralteten Quellen noch <nobr>. Das soll man aber nicht verwenden!

• Die Lösung mit dem Media-Query ist also stabiler.

• Gib die Breite im Media-Query nicht in Pixeln an! Das ist mindestens in diesem Fall falsch.

• Achte darauf, etwas großzügig zu sein, auf meinem Linux werden z.b. Zeichen vieler Schriftarten etwas breiter dargestellt als unter Windows. Viele Webseiten sehen aus diesem Grund unter Linux "einfach sch..." aus!

[Gunnar Bittersmann]

@@ursus contionabundo

<td><span class="tdbreak">100</span><span class="tdbreak">-</span><span class="tdbreak">600</span></td>

Es genügt, entweder die Werte (wie gezeigt) oder den Bis-Strich in einzuspannen.

Letzteres hätte den Charme, dass man bei vertikaler Darstellung auch den Bis-Strich drehen kann:

100
  |
600

span.tdbreak {
   display:inline;
}

Überflüssig. Das span-Element ist sowieso schon inline.

@media (max-device-width: 70em) {

max-width, nicht max-device-width.

   span.tdbreak {
       display:block;
       width:100%;
       padding:0;
       margin:0;

Überflüssig. Ein block-Element macht sich sowieso schon 100% breit und span hat null padding und margin.

       text-align:center;

Bitte nicht. Textinhalte sollten linksbündig sein, Zahlen evtl. rechtsbündig.

<td>100<span class="nobreak">&nbsp;-&nbsp;</span>600</td>

notieren. Das funktioniert aber nur wenn die Zahlen höchstens dreistellig sind, genauer genommen höchstens so breit dargestellt werden wie das Minus-Zeichen und die beiden No-Breaking-Spaces.

Nein! Ein Bis-Strich (‘–’ U+2013 en dash) ist kein Minus-Zeichen (‘−’ U+2212). Und ein Bindestrich (‘-’ U+002D Strichjunge) ist weder das eine noch das andere.

Und der Bis-Strich wird üblicherweise ohne Leerzeichen davor und danach gesetzt. (Wikipedia)

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wo wir gerade bei Typografie sind: Was ist hier falsch?

LLAP 🖖

[beatovich]

hallo

Hallo zusammen,

ich suche eine Lösung für mein Darstellungsproblem von Zahlen. In einer dynamischen Tabelle sollen die "von - bis" werte entweder Zeilenweise oder Spaltenweise dargestell werden. Beispiel:

Wenn die Zelle breit genug ist, dann: 100 - 600

Wenn die Zelle zu schmall ist, dann:

100

−

600

Im Moment wird willkürlich so umgebrochen:

100 −

600

Vielen dank für Ihre Vorschläge im Vorraus.

Mein Vorschlag ist, mache dir so viel Platz verfügbar wie die Tabelle braucht, und das heisst zur Not -> overflow:auto

Ferner muss du auch an Screenreader denken. Die lesen Spaltenheader mit jeder Zelle vor Da kann es besser sein, Werte übber 2 Zellen zu verteilen

Beispiel:

<th>gültig von</th><th>gültig bis</th> <th>Breite in mm minimal</th><th>Breite in mm maximal</th>

Meint - ein Minus, ein Bindestrich (oder bei deinem Umbruchversuch) eine verunglückte Bruchdivision? Vermeide dergleichen Ambiguität.

Ferner kann man mit CSS eine tabelle zu einer Art Dataliste umformatieren (display:block) Hierbei ist es nützlich die erste Tabellenspalte als th mit scope Attribut zu notieren.

[Gunnar Bittersmann]

@@beatovich

Ferner kann man mit CSS eine tabelle zu einer Art Dataliste umformatieren (display:block)

Dann ist es aber keine Tabelle mehr …

Hierbei ist es nützlich die erste Tabellenspalte als th mit scope Attribut zu notieren.

… sodass scope doch gar nicht mehr wirkt, oder?

LLAP 🖖

[beatovich]

hallo

@@beatovich

Ferner kann man mit CSS eine tabelle zu einer Art Dataliste umformatieren (display:block)

Dann ist es aber keine Tabelle mehr …

Du meinst kein grid mehr.

Hierbei ist es nützlich die erste Tabellenspalte als th mit scope Attribut zu notieren.

… sodass scope doch gar nicht mehr wirkt, oder?

Na ja, es würde irrelevant.

Ich verwende JS, um für alle User den th-Inhalt verfügbar zu machen.

[Gunnar Bittersmann]

@@beatovich

Ferner kann man mit CSS eine tabelle zu einer Art Dataliste umformatieren (display:block)

Dann ist es aber keine Tabelle mehr …

Du meinst kein grid mehr.

Nein, ich meine „keine Tabelle mehr“.

Es geht nicht um die visuelle Darstellung, sondern darum, wie assistive Technologie den Inhalt behandelt. Und wenn display:block im Spiel ist, dann behandelt AT das Zeug nicht mehr als Tabelle.

Das mag man durchaus als fehlerhafte Implementierung ansehen. Man muss sich wohl aber damit abfinden.

LLAP 🖖

[beatovich]

hallo

Dann ist es aber keine Tabelle mehr …

Du meinst kein grid mehr.

Nein, ich meine „keine Tabelle mehr“.

Es geht nicht um die visuelle Darstellung, sondern darum, wie assistive Technologie den Inhalt behandelt. Und wenn display:block im Spiel ist, dann behandelt AT das Zeug nicht mehr als Tabelle.

Bad news. Man kann den Entwicklern auch Steine in den Weg werfen.

Wird das scope Attribut berücksichtigt?