Page 2 of 2
Re: FOUC wegen live-Uhrzeit
Posted: Sun 2. Jul 2023, 15:46
by Tobi
Klar ellipsis ist ne sinnvolle Ergänzung.
Denn dann würde ggf. PM oder AM ausgeblendet.
Und ob nun Vormittag oder Nachmittag ist sollte jeder schon selbst wissen.
Aber wie gesagt das ist immer noch kein Problem sondern einfach nur Typografie. Wahrscheinlich würde eine entsprechende zusätzliche Schriftart Abhilfe schaffen.
Aber das wäre echt mit Kanonen auf Spatzen geschossen.
Re: FOUC wegen live-Uhrzeit
Posted: Mon 3. Jul 2023, 10:39
by Alexander
Bei den auf meinem System verwendeten Schrift (hier greift die "Ubuntu" Schriftart) wackelt es auch nicht, habe dann also andere Schriftarten ausprobiert, bis ich dann mal eine fand (Helvetica), wo es bei einer bestimmten Uhrzeit (10:30:11) 1 px kleiner ist als normal .
Habe mal "font-variant-numeric: tabular-nums;" ausprobiert aber das Problem blieb weiterhin bestehen. Hmm
Re: FOUC wegen live-Uhrzeit
Posted: Mon 3. Jul 2023, 10:42
by bernhard
Spannend, danke für's Testen! Ich werde mal in meiner Web-Developer Community fragen, ob jemand eine Idee hat!
Re: FOUC wegen live-Uhrzeit
Posted: Mon 3. Jul 2023, 11:25
by tab-kh
Naja, ist eigentlich klar.
Code: Select all
font-variant-numeric: tabular-nums;
Das kann nur funktionieren, wenn die Schiftart solche "Tabellenziffern"auch hat. Sonst wird es schwierig werden. Außerdem muss es der Browser unterstützen, denn ich bin mir nicht sicher ob das überhaupt (schon) Standard-CSS ist. Es klappt auch grundsätzlich nur mit Open Type Fonts.
Re: FOUC wegen live-Uhrzeit
Posted: Mon 3. Jul 2023, 15:18
by bernhard
https://caniuse.com/font-variant-numeric --> sollte bei über 96% funktionieren
Hab jetzt im anderen Forum noch keine hilfreichen Antworten bekommen. white-space nowrap ist aus meiner Sicht keine Lösung und würde das Problem schlimmer machen statt besser, weil man dann evtl. auf mobile gar keine Zeit mehr sieht oder man extra Styles for mobile bereitstellen müsste.
@alexander
Was passiert, wenn du bei dir folgendes CSS setzt?
Code: Select all
#app-server-time { font-variant-numeric: tabular-nums; }
Wenn das bei dir ignoriert wird bzw. keine Auswirkungen hat, dann wäre das doch vielleicht eine Lösung? Weil bei mir reicht das als Lösung:
Man sieht, dass die Zeit etwas gestreckt wird, damit jede 1 so breit ist wie die anderen breiteren Ziffern (3 etc).
Re: FOUC wegen live-Uhrzeit
Posted: Mon 3. Jul 2023, 15:57
by Tobi
Auch wenn Alex nun den Zeitsprung korrigiert, ist doch diese Aussage hoffnungslos übertrieben und ich kann das echt nicht unkommentiert lassen…
bernhard wrote: ↑Mon 3. Jul 2023, 15:18white-space nowrap ist aus meiner Sicht keine Lösung und würde das Problem schlimmer machen statt besser, weil man dann evtl. auf mobile gar keine Zeit mehr sieht oder man extra Styles for mobile bereitstellen müsste.
Wie soll das denn gehen, dass man „gar keine Zeit mehr sieht?“ Bitte versuche es doch erstmal. Es handelt sich maximal um vier oder vielleicht sogar um zehn Pixel. Aber dass zehn Pixel die gesamte Zeitanzeige verhindern sollen, dass kann ich mir beim besten Willen nicht vorstellen.
Mobile hat bereits einen eigenen Style. Nennt sich responsive. Und es ist normal, dass mobile spezielles CSS hat. Ist ja mobile?!?
Re: FOUC wegen live-Uhrzeit
Posted: Mon 3. Jul 2023, 16:33
by bernhard
Code: Select all
#app-server-time {
white-space: nowrap;
}

Re: FOUC wegen live-Uhrzeit
Posted: Mon 3. Jul 2023, 16:37
by Tobi
Ok. Ich nehme alles zurück und behaupte das Gegenteil.
Danke, das du dir die Mühe gemacht hast!
Ich bin sicher Alex findet eine adäquate Lösung.
Re: FOUC wegen live-Uhrzeit
Posted: Mon 3. Jul 2023, 17:23
by Alexander
bernhard wrote: ↑Mon 3. Jul 2023, 15:18
Code: Select all
#app-server-time { font-variant-numeric: tabular-nums; }
Wenn das bei dir ignoriert wird bzw. keine Auswirkungen hat, dann wäre das doch vielleicht eine Lösung? Weil bei mir reicht das als Lösung:
Du kannst die Änderung auch jetzt schon über die White-Label-Funktion updatesicher speichern.