Oberer Seitenrand der Webseite, wenn sich unterschiedliche Schriftarten in unterschiedlichen Spalten befinden

Ich habe eine Webseite mit zwei Spalten:

  • Die schmale linke Spalte ist eine vertikale Navigationsleiste mit einer kleinen (oder normalen) Schriftgröße
  • Die rechte Hauptspalte enthält den Inhalt, der eine Mischung aus Schriftarten hat (z. B. beginnt er mit einer großen <h1>Überschrift.

Hier ist ein Screenshot von oben auf der Seite:

Geben Sie hier die Bildbeschreibung ein

Meine Fragen sind:

  • Meinen Sie nicht auch, dass es wichtig ist, dass die Oberkante des Textes in der linken Spalte (zB ".NET") mit der Oberkante des Textes in der rechten Spalte (zB "WYSIWYG") übereinstimmt?
  • Gibt es eine Designalternative (irgendeine Möglichkeit, das Design zu ändern, vielleicht zusätzliche Elemente zum Design hinzuzufügen, um diese Ausrichtung weniger wichtig oder unwichtig zu machen?
  • Wenn (oder vorausgesetzt, dass) es wichtig ist, wie wird es implementiert?

Ich denke, es ist im Moment um zwei Pixel falsch, dh der rechte Text ist zwei Pixel zu niedrig.

Ich denke, es ist schwierig (vielleicht unmöglich) mit CSS zu implementieren, weil:

  • Die Schrifthöhe ist kompliziert
  • Die zwei Textbits haben unterschiedliche Größen und unterschiedliche Schriftarten
  • Die Schriftfamilien sind zur Entwurfszeit noch nicht einmal bekannt (es hängt davon ab, welche Schriftarten für den Webbrowser des Benutzers vorhanden sind).

Ist das ein bekanntes Problem? Gibt es eine Lösung?

Sollte ich stattdessen versuchen, die Grundlinien der beiden Spalten auszurichten , um ungefähr so ​​​​auszusehen:

Geben Sie hier die Bildbeschreibung ein

Aber ich glaube nicht, dass ich weiß, wie ich das mit CSS implementieren soll.

Normalerweise würde dies (das Ausrichten der Grundlinien der beiden Textbits) automatisch geschehen, außer dass sich die beiden Textbits hier nicht wirklich in derselben Zeile befinden (sie sind nicht beide in derselben Zeilenbox in einem übergeordneten Block): weil Jede Spalte ist eine separate <div>.

Ich habe nur gedacht: Vielleicht kann ich es tun, indem ich ein Leerzeichen mit der Breite null (oder so ähnlich) mit der Schriftgröße des rechten Textes in den linken Text einfüge (vielleicht mit CSS ), :afteralso dass der Text auf der linken Seite eine Zeilenbox mit einem unsichtbaren Zeichen teilt, dessen Schriftartmaße die gleichen sind wie der Text auf der rechten Seite. Ich werde eine Antwort posten, wenn ich es zum Laufen bekomme, in der Zwischenzeit wäre jede andere Antwort willkommen.

Antworten (1)

CSS wie das folgende reicht aus, um die obige 2. Lösung zu implementieren:

#nav.notJumbo a[href='/']::after {
    content: ' ';
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
}

Dadurch wird der ersten Zeile der linken Spalte ein unsichtbares Zeichen (Leerraum) hinzugefügt, das die gleichen Schriftartmaße wie der Text oben in der rechten Spalte hat -- das bedeutet die beiden Zeilenkästchen ( links und rechts) haben dieselbe Größe: weil sie jetzt Text in derselben Größe enthalten.

Notiz:

  • Der Selektor ist alles, was benötigt wird, um den ersten Anker auszuwählen (der hrefin diesem Beispiel auf die Homepage der Website verweist).
  • Das contentist hier ein leerer Raum, ein weißer Raum; Sie könnten dies durch ein Unicode-Thin-Space oder ein Zero-Breite-Space ersetzen
  • Die anderen Eigenschaften sind alles, was notwendig ist (einschließlich font-familyfalls erforderlich), um die Schriftart- und Zeilenboxmetriken der ersten Zeile (z. B. der Überschrift) der rechten Spalte abzugleichen.

Ich nehme an, dies löst den technischen Teil (Implementierung, Vorgehensweise) der Frage.

Ich würde mich noch über andere Antworten freuen, die das Design kommentieren können.

Oberer Seitenrand der Webseite, wenn sich unterschiedliche Schriftarten in unterschiedlichen Spalten befinden
AntwortenHierDatenschutz-Bestimmungen1y, 0v