Button als Fließtext

[Gunnar Bittersmann]

Ein Button soll als Fließtext dargestellt werden. Rahmen weg, Hintergrund weg, Padding weg, Schrift geerbt – alles kein Problem, siehe Beispiel.

Nur ein Zeilenumbruch will mir nicht gelingen. Obwohl „Within“ noch in die Zeile passt, wird im Buttontext kein Zeilenumbruch gemacht. Selbst

button {
  appearance: none;
  display: inline;
  white-space: wrap;
}

hilft da nicht.

Gibt es für den Buttontext vielleicht noch ein Pseudoelement/eine Pseudoklasse (darf auch browserspezifisch sein), für die man das noch setzen könnte?

🖖 Live long and prosper

PS: <input type="button"/> verhält sich genauso.

[MudGuard]

Hi,

Ein Button soll als Fließtext dargestellt werden. Rahmen weg, Hintergrund weg, Padding weg, Schrift geerbt – alles kein Problem, siehe Beispiel.

Nur ein Zeilenumbruch will mir nicht gelingen. Obwohl „Within“ noch in die Zeile passt, wird im Buttontext kein Zeilenumbruch gemacht. Selbst

button {
  appearance: none;
  display: inline;
  white-space: wrap;
}

hilft da nicht.

Früher (HTML 4.01) waren die inputs (incl. select, textarea, ...) keine normalen inline-Elemente, sondern replaced-inline-Elements (genauer Name ist mir nicht mehr bekannt). Folge war, daß das styling dieser Elemente stark eingeschränkt war.

Ich weiß nicht, ob das immer noch so ist … (bin nicht mehr ganz so tief drin in der Webseiten-Entwicklung wie früher)

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Gunnar,

if you can't win, cheat.

Es ist semantisch vielleicht nicht so passend und es bräuchte etwas Javascript, aber man könnte ein a Element nehmen und mit Script wie einen Button agieren lassen. Dazu noch etwas aria…

Rolf

[Rolf B]

Hallo Gunnar,

meine Recherchen ergeben auch nicht viel. Nur eine ganz blöde Idee: Mach jedes Wort im Button-Text zu einem eigenen Button und behandle all diese Buttons gleich. Sieht halt nur doof aus, wenn man drübertabbt und die Accessibility ist auch verwirrend.

Konzept-Fiddle

Ob das zugänglich oder bedientauglich ist - keine Ahnung.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Nur eine ganz blöde Idee: Mach jedes Wort im Button-Text zu einem eigenen Button und behandle all diese Buttons gleich. Sieht halt nur doof aus, wenn man drübertabbt und die Accessibility ist auch verwirrend.

Dann nicht alle Buttons gleich behandeln. Per Tastatur kann nur der erste verwendet werden – der dann im aria-label den vollständigen Text hat. Die folgenden sind für Tastaturnutzer deaktiviert.

Die Fokusmarkierung der einzelnen Buttons wird entfernt, dafür wird eine fürs Containerelement eingerichtet.

☞ Sähe dann so aus. Könnte funktionieren. Aber ziemliches Gefrickel.

🖖 Live long and prosper

PS: Man müsste sich noch um den Zwischenraum zwischen den Buttons kümmern. Da sollte keiner sein, sonst clickt man mit der Maus ins Leere. Dafür NBSP am Ende?

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nur eine ganz blöde Idee: Mach jedes Wort im Button-Text zu einem eigenen Button

Könnte funktionieren. Aber ziemliches Gefrickel.

Da fällt mir doch wieder die alte Weisheit ein: “Multiple buttons,” he went on, shaking his head, “are a sure sign of a diseased mind.”^[1]

🖖 Live long and prosper

---

1. frei nach Terry Pratchett ↩︎

[JürgenB]

Hallo Gunnar,

… “Multiple buttons,” …

vielleicht ist das ja der Grund warum Buttons nicht umgebrochen werden. Der Umbruch macht ja aus einem Button visuell zwei.

Gruß
Jürgen

PS Gibt es da nicht ein Kartenspiel? Doppelknopf? 😀

[Gunnar Bittersmann]

@@JürgenB

vielleicht ist das ja der Grund warum Buttons nicht umgebrochen werden. Der Umbruch macht ja aus einem Button visuell zwei.

Man könnte argumentieren: wer die appearance-Eigenschaft kennt, der weiß auch, was er tut. Aber vielleicht ist das zu positiv gedacht?

PS Gibt es da nicht ein Kartenspiel? Doppelknopf? 😀

Du Fuchs du! 🃁

🖖 Live long and prosper

[Martin]

Hi,

in der Theorie würde display: contents; das gewünschte visuelle Verhalten herbeiführen. Praktisch ist das aktuell leider (noch) nicht nutzbar.

[Gunnar Bittersmann]

@@Martin

in der Theorie würde display: contents; das gewünschte visuelle Verhalten herbeiführen. Praktisch ist das aktuell leider (noch) nicht nutzbar.

?? Geht doch: Der Buttontext wird inline dargestellt – mit Zeilenumbruch.

Nur ist das Ding dann kein Button mehr: das Ding ist nicht in der Tab-Reihenfolge und kann nicht per Tastatur bedient werden. (Mausclick geht.)

Also ein <span tabindex="1"> reingesetzt – funktioniert in Safari und Chromia, aber nicht im Firefox.

(Die Ankerpositionierung ging durch display: contents auch verloren, was sich aber leicht beheben lässt, indem man das span als Anker nimmt.)

🖖 Live long and prosper

[Raketenwilli]

Wenn Du ein <br> in Deinem Button notierst siehst Du die Katastrophe: Das display: inline wird nicht wie von Dir erwartet umgesetzt.

span, role="botton", aria-x="y" und ein paar Zeilen Javascript?

[Gunnar Bittersmann]

@@Raketenwilli

Wenn Du ein <br> in Deinem Button notierst siehst Du die Katastrophe: Das display: inline wird nicht wie von Dir erwartet umgesetzt.

Ja. Das läuft wohl darauf hinaus, was @MudGuard sagte: „replaced-inline-Element“.

span, role="botton", aria-x="y" und ein paar Zeilen Javascript?

Das läuft darauf hinaus, was @Rolf B sagte. Ob span oder a, ist dann egal.

Geht in meinem Fall nicht (oder nur mit noch viel mehr JavaScript), weil das Ding ein Popover steuern soll. AFAIS funktioniert das Popover-API nur mit <button> (bzw. <input type="button">).

Mit button geht’s, mit a geht’s nicht.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

und was ist mit der "Ein Wort - Ein Button" Idee?

Rolf