• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Schriftarten unterschiedlicher Größe oben ausrichten

A

annsen

Mitglied
Jede Schrift hat in dem umgebenden Container ja einen Freiraum bis zum Containerrand. Bei großen Schriften ist dieser größer (da prozentual) als bei kleinen Schriften.

Wie kann ich die Schriften nun oben ausrichten? Hab ich die Möglichkeit den Innenabstand (ggf. nur oben) der Schriftcontainer irgendwie auf null zu setzen?

1666821315487.png

Einfach nur das padding auf null zu setzen funktioniert nicht.

Vielen Dank für Tipps und Hinweise!!
 
Man kann den Text auch per canvas ausmessen um die fast exakte Position zu ermitteln.
Es sei denn man möchte es bündig zu den Punkten auf großen Umlauten ausrichten.
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
 <style>
  *{
    font-family:  -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    font-size: 18px;
    line-height:1.2em;
    margin:0;
  }
   p{
     margin-top:100px;
     margin-left: 100px;
     font-size: 3em;
     display: inline-block;
   }
   #o{
     position:absolute;
     left:100px;
     background: rgba(230,230,230,0.5);
   }
  </style>
 
</head>
<body>
    <p id=h>123 ABC</p>
    <div id=o></div>
  <script>
    let c = document.createElement('canvas')
    let ctx = c.getContext('2d')
        ctx.font = `${getComputedStyle(h).fontSize} ${getComputedStyle(h).fontFamily}`
        o.style.top = `${100+ctx.measureText(h.innerText).fontBoundingBoxDescent}px`
        o.style.height = getComputedStyle(h).lineHeight
        o.style.width = getComputedStyle(h).width
  </script>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben