Schriftgröße in Kästchen

[ST747]

Hallo, besonders beim Text in Kästchen funktioniert die Darstellung Text NICHT richtig,wenn der Benutzer über den Bowser die Schriftgröße einstellt. (mit zoom geht das richtig).
Ich habe mit z.B. das Kästchen mit width: 14% und die Schrift font-size: 90% eingestellt, natürlich mit mehreren Abfragen auf die Bildschirmgröße das dann auch angepaßt (responsive).
Stellt ein User die Schriftgröße von 16 auf 18 oder mehr um, gibt es da Verschiebungen im Kästchen. overflow: hidden; ist vorhanden.

Es gibt so eine Funktion zur Begrenzung, die funktioniert aber nicht bei allen Browsern, kann ich nicht nutzen (-webkit-text-size-adjust: 125% z.B.)

Eigentlich wundert es mich, dass es da keine einfache Lösung gibt oder doch?

Natürlich kann man im Kästchen noch Spielraum für eine Vergrößerung einkalkulieren, dann muss man aber noch etwas Platz lassen, das will ich aber vermeiden.

Gerhard

[daniel5959]

Hallo,

wie wäre es mit CSS einen Rahmen um den Text herum zu setzen, dann würde der Rahmen mit dem Text mitwachsen?

>> https://wiki.selfhtml.org/wiki/CSS/E...u%C3%9Fenlinie (CSS/Eigenschaften/äußere Gestaltung/Außenlinie)

daniel5959

[MrMurphy]

Ohne Beispiel können wir dir nicht konkret helfen.

In jedem Fall scheint die Einheit Prozent für so ein Vorgehen ungeeignet, da es im CSS für Prozent sehr viele Ursprünge, Besonderheiten und Ausnahmen gibt.

Um Abwärtskompatibel zu bleiben ließ sich in der weiteren Entwicklung von HTML / CSS daran nichts mehr ändern. Deshalb wurden im Laufe der Jahre weitere Einheiten erdacht und hinzugefügt, die sich einheitlicher Verhalten wie em, rem, vw oder vh. Damit sollte sich dein Vorhaben umsetzen lassen. Mir erscheint rem als am sinnvollsten.

[ST747]

Hallo,
hier das Beispiel als Anlage pdf.:
In der Anlage ist zu sehen, auf Seite 1 noch o.k., auf Seite 2 mit der größeren schrift 18 dann auch vergrößerte Kästchen,
auf seite 3 ist dann mit schriftgröße 22 das problem in rechten kästchen zu erkennen, hunde ist abgeschnitten.
wegen den kleinen kästchen ist das auch begrenzt vom text und ausdehnung, ist wie eine box für ein menüsystem.

für das responsive design mache ich das dann stufenweise so:
@media screen and (max-width: 64em) {
.xxa {
width: 14%;
font-size: 90%;
color: #800000;
}
}

an rem hatte ich auch schon gedacht, das wird aber nicht viel ändern? ist ja ähnlich %.

Gerhard

[MrMurphy]

ist ja ähnlich %

Nein, intern funktioniert rem ganz anders als Prozent.

Auf Pixel-Angaben (falls du die verwendest) sollte bei der Schriftgröße grundsätzlich verzichtet werden.

Wir kennen noch immer nicht dein HTML und dein CSS und wie die Besucher die Schriftgröße ändern können. Deshalb können wir dir keine konkreten Infos geben.

Wie soll der Text sich überhaupt verhalten wenn der zu groß wird? Soll der Kasten in die nächste Zeile rutschen? Soll der Text, sofern er aus mehreren Worten besteht, umbrechen?

Am einfachsten wird wohl eine Lösung mit Media Queries unter der Verwendung der Einheit rem sein. Das hängt aber von deinem Quelltext ab und in wie weit du den ändern kannst.

[ST747]

soory, hatte den Code zugewiesen:

@media screen and (max-width: 64em) {
.xxx {
width: 24%;
font-size: 100%;
color: #000000;
}
}

Aber wesentlich ist, dass ich die Kästchen und die Schrift in einer Zeile flexibel mache
und das dann abhängig der Bildschirmgröße resposive steuere, mit mehreren Anweisungen.

es fehlt noch so ein scheinbar einfacher code wie max-font-size oder gibt es einen Trick?


gerhard

.

[Sempervivum]

Die Höhe der Container nicht fest sondern variabel lassen. Dann sollte es mit der Überschrift und mit "Hunde" klappen.

[ST747]

hi, danke für die tips, ich werde wohl am wochende oder nächste woche das mit rem probieren,
das muss ich mir erst genau anschauen.
ich hatte ja extra auf % umgestellt und keine pixel angegeben um das flexibel zu halten..
die höhe container kann ich da nicht variabel lassen.

ich habe aber gesehen, da gibt es bei vielen anderen website probleme, wenn die schriftgröße im bowser umgestellt wird.
beispiel anlage:

mit umstellung schriftgröße browser meine ich z.b. bei firefox unter einstellungen > allgemein > sprache - Erscheinungsbild die
größe einstellen.also von 16 auf z.b. 22
viele ältere menschen nutzen das, wie ich erfahren habe.

meine site ist auch noch nicht im netz, ich entwickle das noch.

gerhard

[Sempervivum]

die höhe container kann ich da nicht variabel lassen.

Warum denn nicht? Aus Gründen der Optik, weil sich dann das Layout verändert?

[ST747]

ja, ich will das layout da nicht verändern, weil solche Kästchen noch in der Zeile darunter kommen.
optisch unterschiedliche höhen schaut da nicht gut aus.
ich sehe ja auch bei anderen website, die lassen darunter noch eine 2. zeile frei, dann kann sich der
text darunter ausdehnen. die haben aber, wie ich gesehen habe, dann ggf. auch das schriftgrößenproblem.
vermutlich ist das ein problem vieler website.
nächste woche muss ich das nochmals testen/umstellen, mal sehen, es gibt da verschiedene möglichkeiten,
will mir das mit REM auch anschauen.
gerhard

[daniel5959]

Hallo,

vielleicht mal einen Screenshot-Ausschnitt hochladen, mit den Kästchen und was darum herum liegt, damit man sich die Sache besser vorstellen und eine passende Lösung anbieten kann.

daniel5959

[Sempervivum]

ja, ich will das layout da nicht verändern, weil solche Kästchen noch in der Zeile darunter kommen.
optisch unterschiedliche höhen schaut da nicht gut aus.

Ich fürchte, hier kannst Du den Pelz des Bären nicht waschen, ohne ihn nass zu machen: Willst Du Menschen mit schlechten Augen unterstützen, musst Du in Kauf nehmen, dass das Layout weniger schön wird, wenn man die Schriftgröße erhöht. Das wirkt sich ja nur aus wenn man letzteres tut, bei Standard-Schriftgröße haben die Kästchen die normale Höhe. Jedenfalls in meinem Browser, Opera, passt sich die Höhe eines Containers automatisch an, wenn ich die Schriftgröße erhöhe.

[arnego2]

ich hatte es ja schon mal angesprochen. Einfacher wird es wenn du ein neues Template nimmst.

[ST747]

hi,

ich habe das Thema abgeschlossen.Mit REM habe ich aber nicht mein Ziel erreicht.
Trotzdem verwende ich jetzt REM, aber nicht für die Kästchen.
Dabei habe ich den 62,5% Trick erfahren.
Mit css Body und font-size 62,5% kann man das auf 10px definieren
und dann leicht umrechnen, font-size 160% sind dann 16px usw.
Bei der Schrift geht das gut, aber in den Kästchen habe ich mir
etwas einfaches einfallen lassen, ich lasse noch etwas Platz in den Kästchen.
Dann kann ich auch eine größere Schrift unterbringen.
Über Media verwende ich dann % in CSS.

Da ist noch eine Krücke im System bei CSS, nicht umsonst wurde das mit webkit versucht.

gerhard