Zeilenabstand bei Subskript und Superskript

[ssagis]

Hallo,

ich finde nicht das, was ich suche... Vielleicht weiß jemand bescheid.

Es geht darum, Hochzahlen (² oder ²) und Indizes (₂) so zu formatieren, dass das Layoutbild nicht beeinträchtigt wird. Das geht aber nicht. Der Zeilenabstand wird hier immer verändert.

Auch wenn ich diese Formate als "class" (.sup und .sub) anlege und ihnen entsprechende Werte für font-size (50, 60, 70%) und vertical-align (baseline / text-bottom / text-middle oder text-top) zuweise, wird das Abstandsbild verändert - und zwar umso nehr, als die Größe abnimmt.

Die Empfehlung in der Seite https://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz#hochgestellte_Ziffern, statt der o.g. Möglichkeiten die UTF-Zeichen zu verwenden, löst das Problem nicht.

Besonders in einem "epub" wirkt sich dieser Fehler sehr störend auf den Lesefluss aus.

Kann das jemand entknoten ?

Martin van der Veer

[Der Martin]

Hi,

Es geht darum, Hochzahlen (² oder ²) und Indizes (₂) so zu formatieren, dass das Layoutbild nicht beeinträchtigt wird. Das geht aber nicht. Der Zeilenabstandwird hier immer verändert.

hast du den Zeilenabstand denn explizit festgelegt oder lässt du den Browser selbst wählen?

Ich denke, dass das dein Problem schon lösen sollte.

So long,
 Martin

[ssagis]

Hi,

hast du den Zeilenabstand denn [explizit festgelegt]

Prozentual.

Ich denke, dass das dein Problem schon lösen sollte.

Tut es leider nicht.

Grüßchen ... tschüßchen ...       === Martin ===

[Auge]

Hallo

hast du den Zeilenabstand denn [explizit festgelegt]

Prozentual.

Auf welchen Wert? MrMurphys Vorschlag von 130% halte ich persönlich noch für zu gering. 140 oder gar 150% dürfen es schon sein.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Auf welchen Wert? MrMurphys Vorschlag von 130% halte ich persönlich noch für zu gering. 140 oder gar 150% dürfen es schon sein.

So pauschal kann man das kaum sagen. Die optimale Zeilenhöhe hängt ab von:

• der Zeilenlänge
• der x-Höhe der Schrift
• der Strichstärke der Schrift
• …

s.a. Bram Stein, The Science of Typography, 67ff.

LLAP 🖖

[ssagis]

Hallo

hast du den Zeilenabstand denn [explizit festgelegt]

Prozentual.

Auf welchen Wert? MrMurphys Vorschlag von 130% halte ich persönlich noch für zu gering. 140 oder gar 150% dürfen es schon sein.

Für Fließtext nehm ich meist 140%, das kommt gut auf meinem Sony-Reader.

Gruß Martin

[quincunx]

Hallo,

habe dein Beispiel auf CodePen mit utf8 Zeichen nachgespielt, zumindest unter aktuellen Windows Browsern gibt es keinen Versatz der Zeilenhöhe es.

gruesse quinxunc

[Gunnar Bittersmann]

@@quincunx

habe dein Beispiel auf CodePen mit utf8 Zeichen nachgespielt

UTF-8-Zeichen gibt es nicht. (Zeichensatz vs. Zeichencodierung. Zeichen gibt es in Zeichensätzen. Unicode ist einer, UTF-8 ist keiner.)

zumindest unter aktuellen Windows Browsern gibt es keinen Versatz der Zeilenhöhe es.

Superscript- und Subscript-Zeichen wurden auch extra so entworfen, dass sie sich in Text einfügen. Auch was die Strichstärke betrifft. [Wikipedia]

LLAP 🖖

[MrMurphy1]

Hallo

um das Problem besser ansehen zu können kannst du sup und sub eine Hintergrundfarbe geben, zum Beispiel rot.

Die Zeilenhöhe (line-height) sollte zur besseren Lesbarkeit insgesamt etwas erhöht werden. 1.3 (ohne Einheit) werden beim Lesen als angenehm empfunden.

Das löst aber wahrscheinlich nicht dein Problem. Dazu müsstest du einen deutlich höheren Wert wählen, wodurch das Textbild unnatürlich wirkt, der Zwischenraum wird zu hoch.

Um mit sup oder sub hoch- beziehungsweise tiefgestellte Zeichen daran zu hindern den Zeilenabstand zu beeinflussen kannst du sub und sup mittels CSS eine line-height von 0 auf den Weg geben. Danach solltest du kontrollieren, ob die hoch- beziehungsweise tiefgestellten Zeichen nicht in andere Zeilen hineinragen.

Gruss

MrMurphy

[MrMurphy1]

Hallo,

ein Nachtrag.

In der normalize.css werden für sup und sub folgende CSS-Werte vorgegeben, die wohl browserübergreifend für eine gleichmäßige Zeilenhöhe und eine sinnvolle Darstellung der betroffenen Zeichen sorgen sollen:

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5rem;
}

sub {
  bottom: -0.25rem;
}

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

In der normalize.css werden für sup und sub folgende CSS-Werte vorgegeben […]

sup {
  top: -0.5rem;
}

sub {
  bottom: -0.25rem;
}

Du erzählst mal wieder großen Unsinn. In normalize.css sind die Werte selbstverständlich nicht in rem, sondern in em angegeben. Und das muss auch so sein, wie ich dir schon mindestens einmal sagte.

Du bist immer noch confused about rem and em.

LLAP 🖖

[marctrix]

Hej MrMurphy1,

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5rem;
}

sub {
  bottom: -0.25rem;
}

Ich weiß, ich weiß, manch einen stört es nicht, mit CSS zu arbeiten, dass nur wenige Prozent der Nutzer unberücksichtigt lässt. Mag sein, der ein oder andere wird die folgende Bemerkung als pingelig empfinden. Aber das kann ja jeder für sich selbst entscheiden.

Damit hier aber jemand der fragt (und dessen Wissenstand wir nicht kennen), zumindest weiß, dass es bei einem Vorschlag Probleme geben könnte (und daraufhin selber entscheiden kann, ob die für sein Projekt relevant sind), sollte man mal erwähnen, wo rem z. B. nicht (wie erwartet) funktioniert.

Wenn es sich um Schriftgrößen handelt sollte man IMHO zumindest folgenden Bug erwähnen (Android 4.4):

Chrome 31-34 & Chrome-based Android versions (like 4.4) have a font size bug that occurs when the root element has a percentage-based size.

Am besten man gibt bekannte Workarounds dann auch gleich mit...

Marc

[Auge]

Hallo

Wenn es sich um Schriftgrößen handelt sollte man IMHO zumindest folgenden Bug erwähnen (Android 4.4):

Chrome 31-34 & Chrome-based Android versions (like 4.4) have a font size bug that occurs when the root element has a percentage-based size.

Ich lese das so: Dies ist ein Fehler, der auftritt, wenn für das Root-Element eine Schriftgröße mit der Einheit % angegeben ist.

Also:

html { font-size: 100%; }

Macht das bei neuen Projekten noch jemand? Die 100% sind ja eh die browserseitige Vorgabe und die Sonderspäßchen, wie 100.01% für irgendeinen Browser, braucht ja auch keiner mehr. Interpretiere ich das überhaupt richtig?

Tschö, Auge

[marctrix]

Hej Auge,

Wenn es sich um Schriftgrößen handelt sollte man IMHO zumindest folgenden Bug erwähnen (Android 4.4):

Chrome 31-34 & Chrome-based Android versions (like 4.4) have a font size bug that occurs when the root element has a percentage-based size.

Ich lese das so: Dies ist ein Fehler, der auftritt, wenn für das Root-Element eine Schriftgröße mit der Einheit % angegeben ist.

Also:

html { font-size: 100%; }

Macht das bei neuen Projekten noch jemand?

Wenn man das nicht weiß, sollte man mal darauf hinweisen, dass man dann mit Schriftgrößen in rem Probleme bekommen kann - und warum man das nicht macht.

Die 100% sind ja eh die browserseitige Vorgabe und die Sonderspäßchen, wie 100.01% für irgendeinen Browser, braucht ja auch keiner mehr. Interpretiere ich das überhaupt richtig?

So habe ich das auch verstanden. Wobei es ja weitere Probleme mit rem gibt. Wenn man die benennt, ist ja alles in Ordnung. Wie gesagt, betreffen die wenige Leute. In einem Samsung-Forum wäre es z. B. ziemlich ärgerlich, wenn man border in rem angegeben hätte.

Solche Entscheidungen (ein Bug ist relevant/nicht relevant) kann man nur treffen, wenn man das Projekt, die Zielgruppe oder echte Nutzerstatistiken kennt.

Marc

[ssagis]

Hallo

Um mit sup oder sub hoch- beziehungsweise tiefgestellte Zeichen daran zu hindern den Zeilenabstand zu beeinflussen kannst du sub und sup mittels CSS eine line-height von 0 auf den Weg geben.

Wow. Das scheint es gewesen zu sein. Vielen Dank. (Ist so logisch, dass ich auch selbst hätte drauf kommen können. Bin ich aber nicht.) =:-}

Schöne Grüße

Martin