Korrektur der vertikalen Schriftzentrierung (valign=center)

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Korrektur der vertikalen Schriftzentrierung (valign=center)

      Folgend die Beschreibung einer eigenen Anpassung, die vielleicht auch für andere Nutzer von Interesse ist...

      Das Problem: In einigen list-Elementen oder Labels werden Texte durch die Einstellung valign="center" nicht an der Grundline (Baseline) ausgerichtet, sondern anhand der jeweiligen Zeichenhöhe mittig positioniert.

      zentrierung.jpg

      Dadurch liegen in der Kanalliste die Sendernamen und Sendeinfos teilweise auf abweichenden Y-Position, da Texte mit Unterlinien (g/j/p/q/y) als höher interpretiert werden.

      baseline.jpg

      Die Vorgabe valign="center" lässt sich für die Kanalliste nicht über die Skineinstellungen abändern. (Oder habe ich hier etwas übersehen?)

      Um das Problem zu umgehen, habe ich eine Truetype-Schrift für den Eigengebrauch so abgeändert, dass für alle Zeichen dieselbe Höhe gilt.
      So werden korrekte vertikale Positionierungen berechnet.

      Geänderte Schriften will ich aus Copyrightgründen nicht verbreiten, daher hier eine Anleitung, wie sich das für den Eigengebrauch selbst umsetzen lässt (z.B. für lizenzfreie Schriften).
      Evtl. ist das ja auch für Skinentwickler relevant, die Schriften mitausliefern.

      Genutzt habe ich die Freeware Fontforge (Windows).

      1) Höchste/niedrigste Zeichen suchen (z.B "|" und "g") und die oberste/unterste Position merken
      font01.jpg

      2) An der gemerkten obersten/untersten Position für ein Zeichen je einen minimal kleinen (und damit quasi unsichtbaren) Punkt setzen.
      font02.jpg

      3) Die beiden Punkte markieren (Shift und Anklicken) und kopieren (Strg+C).
      font03.jpg

      4) Nun alle relevanten Zeichen (A..Z, a..z, 0..9) markieren, öffnen und die Punkte dort einfügen (Strg-V)
      font04.jpg font05.jpg

      5) Schrift als Truetype-Font exportieren
      font06.jpg

      Ja, ich weiß, das ist nicht gerade elegant und zudem mühsam...
      Vielleicht kennt ja jemand hier eine besssere Methode, die Schrifthöhen in Truetype-Fonts global abzuändern.

      Im Skin kann die geänderte Schrift nun integriert werden.
      (Beispiel für skin.xml):
      <fonts>
      <font filename="/usr/share/fonts/meinAngepassterFont.ttf" name="channelFont" scale="..."/>
      </fonts>

      Parameter-Anpassung für channelSelection (in skin.xml), um die Höhenpositionierung (Y) passend zu definieren:
      <parameters>
      <parameter name="ServicelistServiceName" value="...,Y,...,..." />
      </parameters>

      Den neuen Font "channelFont" dann im Element "list" in "channelSelection" eintragen.

      Hier das Ergebnis:
      channel1.jpg

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von hgdo ()