Schrift wird unterschiedlich dargestellt

[heinetz]

Hallo Forum,

ich habe das Problem, dass eine Webfont auf verschiedenen Browsern unterschiedlich dargestellt wird. Ich habe schon versucht, das per CSS auszugleichen, komme aber nicht weiter. Konkret sieht das so aus:

Das Design sieht vor, den first-letter anders auszurichten, als das was in den Screenshots zu sehen ist. Ich habe diese css-Angaben aber auskommentiert, um das Problem zu verdeutlichen und den Hintergrund blau gefärbt. Man sieht, dass das Zeichen innerhalb der Zeile jeweils mit unterschiedlichen Abständen nach oben bzw. unten angezeigt wird. Wenn ich das Zeichen nun mi float:left und margin-top ausrichte, ist das Ergebnis auf den Browsern untercheidlich.

Gibt es dafür eine Erklärung und vielleicht sogar eine Lösung?

danke und

gruss, heinetz

[MrMurphy1]

Hallo

Ohne praktisches Beispiel läßt sich dein Problem nicht konkret nachvollziehen. Schließlich können da noch jede Menge anderer CSS-Anweisungen eine Rolle spielen.

Eine konkrete Lösung könnte Flexbox sein.

Was kannst du denn überhaupt im HTML-Quelltext und im CSS anpassen?

Gruss

MrMurphy

[heinetz]

Hallo,

ja, damit habe ich es auch probiert, aber leider nicht hinbekommen. Das mit dem praktischen gestaltet sich deshalb schwierig, weil das Problem im Zusammenhang mit einer Schrift, die ich nicht so einfach bei Codepen einbinden kann steht. Aber ich versuch nochmal an einem anderen Beispiel zu verdeutlichen, wie sich mein Problem darstellt:

Das HTML ist relativ einfach:

<a class="a-button__link" href="">
 <svg class="a-svg-icon a-button__icon" role="img" viewBox="0 0 100 100" aria-labelledby="" data-js-module="a-svg-icon" data-js-sprite-path="/svg-sprites/ui.svg">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ui-arrow-right-mobile"></use>
 </svg>
Go to Homepage
</a>

Das CSS (auf das Wesentliche beschränkt):

.a-button {
    position: relative;
    transition: background-color 0.3s ease-in-out;
    background-color: #202020;
    padding: 0;
    border: none;
    min-height: 2.5rem;
    display: -webkit-box;
    display: flex;
    text-align: left;
}

.a-button__link {
    font-size: 1rem;
    line-height: 1.375rem;
    font-family: "corporate";
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0.5625rem 1.25rem 0.5625rem 2.625rem;
}

.a-button__icon {
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    left: 1.25rem;
    top: 50%;
    margin-top: -0.375rem;
    color: #fff;
}

Das sieht dann folgendermassen im Browser aus (ich habe den Text mit dem Cursor markiert):

1. OSX Chrome

2. WINDOWS Chrome

In beiden Fällen werden jeweils die Zeile und das SVG zentriert dargestellt. Allerdings werden die Glyphen innerhalb der Zeile unterschiedlich positioniert. Dadurch erscheint der Text dann unter OS X nicht zentriert.

Mit einer Arial sieht das Ganze dann so aus:

1. OSX Chrome

2. WINDOWS Chrome

Hier sieht es in beiden Fällen vernünftig aus.

Die horizontale Ausrichtung mehrerer Elemente innerhalb eins Containers kann man natürlich auch anders konstruieren, bspw. mit Flexbox. Aber das führt jeweils zum selben Ziel. Nämlich dass der Text augenscheinlich nicht zentriert ist.

Hat Jemand eine Idee?

gruss, heinetz

[MrMurphy1]

Hallo

Von manchen Leuten fühle ich mich verarscht. Ich habe nicht umsonst geschrieben:

Ohne praktisches Beispiel läßt sich dein Problem nicht konkret nachvollziehen.

Ergebnis: Quellcodeschnipsel, aus denen sich das Problem nicht nachvollziehen läßt.

Beispielseite (temporär)

Was soll das bitte? Offensichtlich machst du dir nicht mal die "Mühe" eine Seite mit deinen Quellcodeschnipseln zu erstellen, erwartest das aber von jedem einzeln von uns, die dir helfen wollen.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@heinetz

Das HTML ist relativ einfach:

Du meinst, man kann relativ einfach was falsch machen‽

 <svg class="a-svg-icon a-button__icon" role="img" viewBox="0 0 100 100" aria-labelledby="" data-js-module="a-svg-icon" data-js-sprite-path="/svg-sprites/ui.svg">

role="img", wirklich? Der Pfeil ist Decoration, sollte also role="none" haben und bis Browser/Screenreader das auch verstehen noch den alten Wert mit drin role="none presentation". Oder gar kein role-Attribute, denn:

Das Ding soll ja gar nicht angesagt werden. labelledby="" dazu halte ich für Mumpitz. Keine Ansage im Screenreader geht so: aria-hidden="true".

In beiden Fällen werden jeweils die Zeile und das SVG zentriert dargestellt. Allerdings werden die Glyphen innerhalb der Zeile unterschiedlich positioniert.

Ja, dem ist so.

Dadurch erscheint der Text dann unter OS X nicht zentriert.

Mit absoluter Positionierung wirst du dem auch nicht zuleibe rücken können. Lass das Icon sich an der Grundlinie ausrichten und verschiebe es vertikal (translateY(), relative Positionierung sollte auch gehen).

☞ Beispiel

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

☞ Beispiel

Ironie des Schicksals:

LLAP 🖖

[heinetz]

Ja, danke. Das passt.

In dem Zusammenhang habe ich etwas interessantes gefunden:

https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

gruss, heinetz

[Mitleser]

In beiden Fällen werden jeweils die Zeile und das SVG zentriert dargestellt. Allerdings werden die Glyphen innerhalb der Zeile unterschiedlich positioniert. Dadurch erscheint der Text dann unter OS X nicht zentriert.

Wenn Du wirklich darauf angewiesen sein solltest, dass Text-Rendering systemübergreifend auf den Pixel genau übereinstimmt, dann musst Du Bitmaps(*) verwenden. Sonst wirst Du scheitern.

Für eine klassische Webseite darf das IMHO aber keine Voraussetzung sein.

*) EDIT: Oder SVG-Pfade, das sollte dann auch passen.