heinetz: Schrift wird unterschiedlich dargestellt

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:

IE 11

Chrome

Firefox

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

  1. 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

    1. 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

      OSX_Chrome_Corporate

      1. WINDOWS Chrome

      WIN_Chrome_Corporate

      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

      OSX_Chrome_Arial

      1. WINDOWS Chrome

      WIN_Chrome_Arial

      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

      1. 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

      2. @@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 🖖

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. @@Gunnar Bittersmann

          Beispiel

          Ironie des Schicksals:

          oben: 	vorwärts immer, rückwärts nimmer; darunter: Backlink

          LLAP 🖖

          -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        2. 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

      3. 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.