Listen im Fließtext

[Rolf B]

Hallo alle,

der Artikel "Listen" im Wiki wurde von einem IP User derart ergänzt, dass die HTML Elemente für Listen Blockelemente sind und deshalb immer untereinander stünden.

Hold my beer, dachte ich, und baute flugs ein p Element mit einer auf inline getrimmten Liste drin. Natürlich hat mir der Browser das Bier dann in die Schuhe gekippt, weil ein p Element nur Phrasing Content akzeptiert und <ol> Flow Content ist.

Das kann man "heilen", indem man statt <p> ein <div> verwendet und passendes Styling für Textparagraphen ergänzt. Soweit ich weiß, hat ein <p> auch keine besondere Aria-Rolle.

Hinzu kommt dann noch, dass ein ˋdisplay:inlineˋ die Eigenschaft ˋdisplay: list-itemˋ überschreibt. D.h. man bekommt per Default keinen Marker mehr und muss ihn mit einem CSS Counter nachbilden. Eine display-Option ˋinline-list-itemˋ gibt's nicht, selbst in der kaum unterstützten Zweiwort-Syntax nicht, weil ˋlist-itemˋ und ˋinlineˋ beides outer-styles sind.

Ist das also eine Heilung? Oder eher eine Transplantation noch größeren Übels? Was sagen die Semantik-Experten dazu?

Ist eine Liste, die (a) inline, (b) mit Listenmarkup erzeugt und (c) mit CSS zurechtgetrimmt wurde - also sowas wie handgemacht in diesem Absatz zu finden - sinnvoll?

<div class="ersatz-paragraph">Ein frisch gegrillter Hamburger ist <ol><li>heiß,</li> <li>fettig</li>
 und <li>furchtbar lecker</li></ol>. Also: Mahlzeit :)</div>

.ersatz-paragraph {
  margin: 0.5em 0;
}
ol {
  padding: 0;
  display: inline;
  counter-reset: liste;
}
li {
  display: inline;
}
li::before {
  content: '(' counter(liste, lower-alpha) ') ';
  counter-increment: liste;
}

Das visuelle Erlebnis dieser HTML/CSS Kombi ist stimmig. Aber ist es auch brauchbar?

Rolf

[Felix Riesterer]

Lieber Rolf,

Das visuelle Erlebnis dieser HTML/CSS Kombi ist stimmig. Aber ist es auch brauchbar?

das kommt ganz darauf an™.

Liebe Grüße

Felix Riesterer

[Tabellenkalk]

Hallo,

<div class="ersatz-paragraph">Ein frisch gegrillter Hamburger ist <ol><li>heiß,</li> <li>fettig</li>
 und <li>furchtbar lecker</li></ol>. Also: Mahlzeit :)</div>

Wenn ich meiner Erinnerung und dem Wiki traue, darf das „und“ da nicht so nackt drin umherstehen…

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

autsch, da hast Du natürlich recht. Wie blöd von mir.

Damit wäre die Idee der "inline-Liste" dann wohl endgültig und jämmerlich dahingeschieden. Man kann sie natürlich zusammen ˋ<span>ˋ-nen, mit Counter und allen Bells and Whistles™️, aber da content-Elemente nicht vorgelesen werden, ist das sinnlos.

Rolf

[Der Martin]

Hi,

<div class="ersatz-paragraph">Ein frisch gegrillter Hamburger ist <ol><li>heiß,</li> <li>fettig</li>
 und <li>furchtbar lecker</li></ol>. Also: Mahlzeit :)</div>

Wenn ich meiner Erinnerung und dem Wiki traue, darf das „und“ da nicht so nackt drin umherstehen…

ich kann nicht nachvollziehen, worauf dein Einwand abzielt. Für mich schließt eine sortierte Liste (ol) nicht aus, dass auch mehrere Punkte zutreffen.

Einen schönen Tag noch
 Martin

[Felix Riesterer]

Lieber Martin,

ich kann nicht nachvollziehen, worauf dein Einwand abzielt. Für mich schließt eine sortierte Liste (ol) nicht aus, dass auch mehrere Punkte zutreffen.

das ist nicht das Problem. Hier ist der Text außerhalb eines li, was ein unerlaubtes Kindelement von <ol> oder <ul> bedeutet.

Liebe Grüße

Felix Riesterer

[Tabellenkalk]

Hallo,

ich kann nicht nachvollziehen, worauf dein Einwand abzielt. Für mich schließt eine sortierte Liste (ol) nicht aus, dass auch mehrere Punkte zutreffen.

und ich kann nicht nachvollziehn, was du mit mehreren zutreffenden Punkten meinst.

Mein Einwand bezog sich auf den Inhalt des <ol>-Elements. Dort dürfen sich <li>-Elemente und <script>-Elemente tummeln. Vielleicht sind noch weitere Ausnahmen möglich, aber nackiger Text gehört nicht dazu.

Gruß
Kalk

[Der Martin]

n'Abend,

ich kann nicht nachvollziehen, worauf dein Einwand abzielt. Für mich schließt eine sortierte Liste (ol) nicht aus, dass auch mehrere Punkte zutreffen.

und ich kann nicht nachvollziehn, was du mit mehreren zutreffenden Punkten meinst.

naja, ich dachte an ein Beispiel wie dieses:

Bevor ich morgens aus dem Haus gehe, würde ich gern 1. die Zähne putzen, 2. duschen, 3. mich rasieren und 4. einen Kaffee trinken. Nach meiner persönlichen Philosophie ist jeder dieser Punkte (außer 1.) verhandelbar, kann also unter besonderen Voraussetzungen auch mal entfallen. Die Reihenfolge bleibt trotzdem bestehen.

Mein Einwand bezog sich auf den Inhalt des <ol>-Elements. Dort dürfen sich <li>-Elemente und <script>-Elemente tummeln. Vielleicht sind noch weitere Ausnahmen möglich, aber nackiger Text gehört nicht dazu.

Ja, das ist der technische Aspekt. Den habe ich inzwischen auch verstanden.

Einen schönen Tag noch
 Martin

[Matthias Scharwies]

Servus!

Hallo alle,

der Artikel "Listen" im Wiki wurde von einem IP User derart ergänzt, dass die HTML Elemente für Listen Blockelemente sind und deshalb immer untereinander stünden.

Hold my beer, dachte ich, und baute flugs ein p Element mit einer auf inline getrimmten Liste drin. Natürlich hat mir der Browser das Bier dann in die Schuhe gekippt, weil ein p Element nur Phrasing Content akzeptiert und <ol> Flow Content ist.

Ich glaube, dass die IP das Missverständnis zwischen Aufzählungen im Fließtext à la „ein schnelles, großes, rotes Feuerwehrauto“ und Aufzählungslisten à la

1. Burger mit Pommes
2. Pizza
3. Schäuferle mit Kloß

hatte. Das man Listen in einer Navigation mit display:inline; nebeneinander positionieren kann, kommt eh im 2.Kapitel „Listen mit CSS gestalten“.

Generell:

Mir wäre es wichtig, Schwachstellen in unseren Tutorials zu finden und auszubessern. Keinesfalls sollten aber alle möglichen Eventualfälle die Artikel so aufblähen, dass man vom Hundersten ins Tausendste kommt.

Danke, dass du das rückgängig gemacht hast!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Rolf B

Das kann man "heilen", indem man statt <p> ein <div> verwendet und passendes Styling für Textparagraphen ergänzt.

Es ist ein Fehler, für Absätze im Text nicht das dafür vorgesehene HTML-Element zu verwenden, was da wäre: <p>.

(„Absatz“. Das Wort „Paragraph“ hat im Deutschen eine andere Bedeutung als im Englischen paragraph.)

Ist das also eine Heilung?

Welches Problem gedachtest du zu lösen? Nicht jede Aufzählung ist eine Liste.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Rolf B

Hold my beer, dachte ich

Hold you mine, then we take Berlin.

Die Variante geht von den Absätzen aus.

But first we take Manhattan.

Die Variante geht von der Liste aus – in Browsern, die :has() unterstützen (also in allen relevanten außer Firefox).

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

okay, aber das ist ja genau das Problem: der display:inline entfernt den display:list-item, der für die Generierung der Marker sorgt.

Im übrigen sagte ein gewisser Herr G.B.: Nicht jede Aufzählung ist eine Liste. Was für Manhattan und Berlin wohl sicher auch zutrifft.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hold my beer, dachte ich

Ich hab da mal die Sprachauszeichnung rangepackt. Und so geht’s:

*Hold my beer*{:@en}, dachte ich

Da wird dann

<p><em lang="en">Hold my beer</em>, dachte ich</p>

draus generiert.

Die Sprachauszeichnung kann inline an per *, **, _ oder __ markierte Textstellen gehangen werden, aber auch an Links und an Bilder:

[then we take Berlin](https://codepen.io/gunnarbittersmann/pen/abKgOYe){:@en}

Für Blockelemente setzt man die Sprachauszeichnung danach durch eine Leerzeile getrennt:

*Hold you mine,* [then we take Berlin](https://codepen.io/gunnarbittersmann/pen/abKgOYe).

{:@en}

generiert:

<p lang="en"><em>Hold you mine,</em> <a href="https://codepen.io/gunnarbittersmann/pen/abKgOYe" rel="noopener noreferrer">then we take Berlin</a>.</p>

🖖 Живіть довго і процвітайте

[MudGuard]

Hi,

Die Sprachauszeichnung kann inline an per *, **, _ oder __ markierte Textstellen gehangen werden,

Welche Sprachauszeichnung gehört denn da hin?

Deutsch, also {:@de}, ist es nicht (da hieße es "... gehängt werden")

cu,
Andreas a/k/a MudGuard

[Der Martin]

Hallo Andreas,

Die Sprachauszeichnung kann inline an per *, **, _ oder __ markierte Textstellen gehangen werden,

Welche Sprachauszeichnung gehört denn da hin?

Deutsch, also {:@de}, ist es nicht (da hieße es "... gehängt werden")

vielen Dank! Hat mich auch schon in den Fingern gejuckt, aber ich dachte mir, ausnahmsweise halte ich mich mal zurück.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@MudGuard

Deutsch, also {:@de}, ist es nicht (da hieße es "... gehängt werden")

Zum Henker! Willst du mir anhängen, ich könne kein Deutsch?

Und sowas muss man sich ausgerechnet von einem Bayern sagen lassen! 😡🤣

🖖 Живіть довго і процвітайте

[MudGuard]

Hi,

Deutsch, also {:@de}, ist es nicht (da hieße es "... gehängt werden")

Zum Henker! Willst du mir anhängen, ich könne kein Deutsch?

Das hast Du Dir schon selbst angehängt ;-)

Und sowas muss man sich ausgerechnet von einem Bayern sagen lassen! 😡🤣

jo mei, mia san halt mia die wahren Deutschn! ;-)

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Rolf B

Hinzu kommt dann noch, dass ein ˋdisplay:inlineˋ die Eigenschaft ˋdisplay: list-itemˋ überschreibt.

Wie hast du es geschafft, den Code so in ` zu setzen, dass er nicht als Code gerendert wird? 🤔

Eine display-Option ˋinline-list-itemˋ gibt's nicht

Nicht? Bin gerade (mehr oder weniger zufällig) auf den Talk Writing Modes von Jen Simmons von 2017 gestoßen. Und was finden wir da auf Slide 22? inline-list-item.

Das mag aber ein Snapshot des damaligen Editor’s Draft gewesen sein und wurde nie in Browsern implementiert.

selbst in der kaum unterstützten Zweiwort-Syntax nicht, weil ˋlist-itemˋ und ˋinlineˋ beides outer-styles sind.

Aber in der Dreiwort-Syntax. 😜 2. Spalte: list-item inline flow.

S.a. Spec (ED) : <display-listitem>

D.h. man bekommt per Default keinen Marker mehr und muss ihn mit einem CSS Counter nachbilden.

Nicht mehr in Firefox. ☞ You can change the system from within.

Chromia und Safari sind noch nicht so weit.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Wie hast du es geschafft, den Code so in ` zu setzen, dass er nicht als Code gerendert wird? 🤔

Mit Chrome auf einem Samsung Tablet. Dessen Tastatur-Addon generiert bei Nutzung des ` Deadkey nicht U+0060 'GRAVE ACCENT', sondern U+02CB, 'MODIFIER LETTER GRAVE ACCENT'. Sch...technik 🤷

Dreiwort-Syntax

WTF? Dieser Teil der CSS Display 3 Spec ist gar nicht mals so neu, aber eine vernünftige Beschreibung hat MDN nicht zustande gebracht. Durften sie nicht, weil Atkins/Etemad das zwar gespecct, aber die Chromies das bisher nicht gecodet haben?

Firefox dagegen scheint das ja schon ewig zu können, und bei Chrome gammelt der Bug dazu vor sich hin 😕

Rolf

[Camping_RIDER]

Aloha ;)

Wie hast du es geschafft, den Code so in ` zu setzen, dass er nicht als Code gerendert wird? 🤔

Mit Chrome auf einem Samsung Tablet. Dessen Tastatur-Addon generiert bei Nutzung des ` Deadkey nicht U+0060 'GRAVE ACCENT', sondern U+02CB, 'MODIFIER LETTER GRAVE ACCENT'. Sch...technik 🤷

Ich verwende auf meinen Android-Geräten flächendeckend das Hacker's Keyboard - und bin sehr zufrieden damit. Das löst für mich solche Probleme.

Einziger Wermutstropfen: Keine native Emoji-Eingabe. Aber damit kann ich angesichts der Vorteile leben...

Grüße,

RIDER