input-Textfeld soll so breit sein wie die maximale Zeichenzahl

[Linuchs]

Moin,

sämtliche meiner Input-Felder haben die font-family monospace.

Nun könnte man annehmen, dass ein Zeichen 1em breit ist. Wenn ein Feld 50 Zeichen aufnehmen kann, möchte ich max-width:50em setzen.

Das klappt gar nicht:

<input required
type        = "text"
id          = "titel_input"
name        = "titel"
title       = "titel (varchar 50)"
maxlength   = 50
style       = "font-family:monospace;max-width:50em;"
value       = "[titel]"
placeholder = "Titel max. 50"
/>

Das Feld soll in derselben Zeile stehen wie sein label (12em). Ohne diese max-width klappt das auch, ist aber ebenfalls breiter als 50 Zeichen.

Hab'sauch mit size=50 versucht, aber calc( 100% - 13em ) ist stärker, das Feld ist zu lang und gaukelt freie Stellen vor.

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

Nun könnte man annehmen, dass ein Zeichen 1em breit ist.

Bei Stackoverflow schreibt jemand: "In traditional typography, the space taken up by a capital letter M and the mandatory whitespace around it is always a square."

Computerfonts folgen keiner traditionellen Typographie. Die EM-Box ist höher als breit. Und die font-size gibt die Zeichenhöhe an, nicht die Dickten (weil das für proportionale Schriften sinnlos wäre).

Wenn Du also einen 16px Font eingestellt hast, ist die EM-Box 16px hoch. Die Breite variiert mit dem genutzten Font. Und dass die EM-Box 16px hoch ist, heißt nicht, dass die Großbuchstaben 16px hoch sind. Normalerweise sind sie niedriger, damit noch Platz für Akzentzeichen ist: É. Im Übrigen ist die EM-Box für einen Font das gleiche wie eine rote Ampel für den typischen Fahrradfahrer: eine nette Empfehlung, aber nichts, wovon man sich beeindrucken lassen muss.

Die einzige Garantie, die Du bei einem Monospace-Font hast (hm, haben solltest), ist, dass die Glyphen dicktengleich sind. Aber eine garantierte Relation von Dickte zu font-size hast Du nicht.

Da hilft nur ausmessen, und zwar im Browser des Users, per JavaScript. Du weißt ja nicht, welcher Font dort zum Zuge kommt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Die einzige Garantie, die Du bei einem Monospace-Font hast (hm, haben solltest), ist, dass die Glyphen dicktengleich sind. Aber eine garantierte Relation von Dickte zu font-size hast Du nicht.

Brauchst du auch nicht.

Da hilft nur ausmessen, und zwar im Browser des Users, per JavaScript.

Pfui bäh! Und: nein.

Du weißt ja nicht, welcher Font dort zum Zuge kommt.

Brauchst du auch nicht.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Linuchs

Nun könnte man annehmen, dass ein Zeichen 1em breit ist.

Könnte man. Ist aber falsch. em gibt die Schriftgröße an (Höhe).

Es gibt aber auch eine Einheit, die sich auf die Breite der Zeichen bezieht. Genauer: auf die Breite des Zeichens 0. Bei dicktengleichen Schriften sollten die anderen Zeichen auch so breit sein wie die 0.

Das Feld soll in derselben Zeile stehen wie sein label (12em).

Ähm nein. Label gehören über die Eingabefelder, nicht daneben.

Hab'sauch mit size=50 versucht, aber calc( 100% - 13em ) ist stärker, das Feld ist zu lang und gaukelt freie Stellen vor.

Für welche Eigenschaft hast du das denn angegeben? Wenn du eine maximale Breite willst, musst du eine maximale Breite angeben. Computer tun, was man ihnen sagt. Man muss ihnen nur sagen, was man will.

Das Zusammenspiel von size-Attribut und maximaler Breite klappt.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

autsch. Wenn ich ja wüsste, was ich alles weiß…

Ok, es gibt also eine passende Maßeinheit. Aber:

• dein * { box-sizing: border-box; } stört dann. Das Input braucht content-box.
• ohne width:50ch ist das Input mit size=50 etwas zu breit. Zumindest bei mir, ohne Fira-Fonts und mit monospace Fallback. Ich vermute, dass der Browser "zur Sicherheit" etwas Luft lassen möchte? Denn die Angabe size=50 hindert mich ja nicht, 47 Zeichen mehr einzugeben. Ich möchte darum die Frage aufwerfen, ob eine maßgenaue Breitenangabe sinnvoll ist.

Mit einem Pattern-Attribut (pattern=".{1,50}") könnte man zumindest eine Validierung herbeiführen und mit einer :invalid-Pseudoklasse den Fehler highlighten.

Rolf

[Gunnar Bittersmann]

@@Rolf B

• dein * { box-sizing: border-box; } stört dann. Das Input braucht content-box.
• ohne width:50ch ist das Input mit size=50 etwas zu breit. Zumindest bei mir, ohne Fira-Fonts und mit monospace Fallback.

Musste halt einen anständigen Browser verwenden. In Firefox sieht alles gut aus, ohne irgendwelche Eskapaden machen zu müssen.

Ja, Chrome rendert das Eingabefeld nur mit size-Attribut ohne Breitenangabe etwas zu breit, mit width: 50ch etwas zu schmal.

Mit box-sizing: content-box muss man von den 100% etwas abziehen. ☞ 2. Versuch

Mit einem Pattern-Attribut (pattern=".{1,50}") könnte man zumindest eine Validierung herbeiführen und mit einer :invalid-Pseudoklasse den Fehler highlighten.

Hab ich mal mit eingebaut.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Rolf B

Mit einem Pattern-Attribut (pattern=".{1,50}") könnte man zumindest eine Validierung herbeiführen und mit einer :invalid-Pseudoklasse den Fehler highlighten.

Was die textuelle Erklärung des Fehlers ergänzen kann, aber nicht ersetzen sollte.

Kwakoni Yiquan

[Linuchs]

Label gehören über die Eingabefelder, nicht daneben.

Ich habe nichts gegen Behinderte, die mit einem kleinen Taschen-Bildschirm auskommen müssen. Auch die werden von mir befriedigt:

Wer sich ein ordentliches Arbeitsgerät leisten kann, hat halt den Überblick. Warum sollte ich die Breite des Display „verschenken“?

Aber danke, dein Zauberspruch wirkt. Habe ihn noch nicht verstanden, aber das wird noch:

<p><label for="titel_input">Titel° max. 50<img id="titel" class="help"></label>
<input [disabled] required
type        = "text"
id          = "titel_input"
name        = "titel"
title       = "titel (varchar 50)"
size        = 50
maxlength   = 50
style       = "
  font: 1em 'Fira Mono', 'PT Mono', monospace;
  width: min(50ch, 100% - 1em);
  box-sizing: content-box;
  border: thin solid silver;
  border-radius: .25em;
"
value       = "[titel]"
placeholder = "Titel max. 50"
/></p>

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

Label gehören über die Eingabefelder, nicht daneben.

Warum sollte ich die Breite des Display „verschenken“?

Das dachten sich die Wikimedia-Entwickler auch. Herausgekommen ist dann halt eine „Folterkammer mit 8 Metern Satzbreite“, wie Frank Rausch auf der Typo Berlin 2018 treffend sagte:

Die englische Wikipedia verwendet inzwischen ein sinnvolleres Template; die deutsche aber immer noch diesen unsäglichen Scheiß.

Das kommt halt raus, wenn Entwickler ein Layout implementieren, ohne jemanden einzubeziehen, der von Gestaltung wenigstens einen Hauch Ahnung hat.

Die Gestaltpsychologie lehrt uns das Gesetz der Nähe: Elemente mit geringen Abständen zueinander werden als zusammengehörig wahrgenommen.

Bei dir sieht man da nicht Label/Eingabefeld-Paare, sondern einen Block mit Labels und einen mit Eingabefeldern, ohne erkennbare Zuordnung. Daran ändern auch die gepunkteten Linien wenig. Dass sie überhaupt da sind, ist ein Zeichen, dass das Design schlecht ist.

Wenn die Labels jeweils über den Eingabefeldern stehen, hat man beides zusammen im Blick und es wird als zusammengehörige Gruppe wahrgenommen (genügend Abstand zum nächsten Paar vorausgesetzt) – so wie es sein soll.

Kwakoni Yiquan

[Tabellenkalk]

Hallo,

Bei [dir] sieht man da nicht Label/Eingabefeld-Paare, sondern einen Block mit Labels und einen mit Eingabefeldern, ohne erkennbare Zuordnung.

Man könnte die Labels rechtsbündig anordnen, dann wäre die Zuordnung da. Ob es gut aussieht, wäre dann zweitrangig...

Gruß
Kalk