Fluid -Superscripts und -Anendeschriften

Superscripts und Indexs sind unverzichtbare Elemente in akademischen und wissenschaftlichen Inhalten und sind von Verweise auf chemische Formeln und mathematische Ausdrücke unverzichtbar. Browser handhaben jedoch statisch mehr, was leicht zu Problemen führen kann: Elemente können auf mobilen Geräten zu klein und auf Desktop -Monitoren zu groß sein.

Ich arbeite seit vielen Jahren an der Lösung des Skalierungsproblems von Superscript und Index in CSS und schlage jetzt eine moderne Lösung mit Fluid Computing vor. In diesem Artikel wird erläutert, warum es Mängel in statischen Methoden gibt und wie eine bessere Typografie für alle Ansichtsfenster bereitgestellt wird und gleichzeitig die Barrierefreiheit aufrechterhält. Das Beste ist, dass diese Lösung nur kurze und reine CSS -Code erfordert.

Probleme mit statischer Skalierung

Das Zoomproblem ist insbesondere beim Vergleich der professionellen Typografie mit Browser -Standardeinstellungen auffällig. Sehen Sie dieses Beispiel (angepasst aus Wikipedia), wobei der erste "2" professionell entworfen und in den Glyphensatz enthalten ist, während der zweite _{(oben) und ^{(unten) Elemente verwendet:}}

Historisch gesehen haben Browser font-size: smaller für ^{und _{Elemente verwendet, was ungefähr das 0,83 -fache der Skalierung ist. Dies war vernünftig, wenn CSS in den frühen Tagen in einfachen Dokumenten verwendet wurde, aber in modernen reaktionsschnellen Designs konnte die Schriftgröße stark variieren, was zu Problemen führt. Dies gilt insbesondere bei der Verwendung von Fluid -Typografie. Die Textgrößen können zwischen extremen Werten reibungslos skaliert werden.}}

Flüssigkeitskalierung: bessere Lösung

Ich habe eine Lösung entwickelt, die durch Kombination fester und proportionaler Einheiten natürlicher über verschiedene Größen skaliert wird. Dieser Ansatz gewährleistet die Lesbarkeit in kleinen Größen und behält gleichzeitig die richtigen Anteile an großen Größen ohne kontextspezifische Anpassungen bei.

Folgendes ist, wie es funktioniert:

sup, sub {
  font-size: calc(0.5em + 4px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(-0.83em + 3.32px) */
}

sub {
  top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(0.42em - 1.66px) */
}

• natürliche Skalierung : Die abnehmende Formel stellt sicher, dass Superscripts und Einweisungen proportional zu allen Größen bleiben.
• Ausrichtung der Grundlinie : Durch die Verwendung vertical-align: baseline und die relative Positionierung verhindern wir, dass Elemente die Reihenhöhen beeinflussen und eine bessere Kontrolle über Offsets bieten, um Ihre spezifischen Anforderungen zu erfüllen. Möglicherweise möchten Sie auch wissen, woher diese Werte stammen - ich werde es unten erklären.

mathematische Zersetzung

Lassen Sie uns analysieren, wie es einzeln funktioniert:

Berechnen Sie die Schriftgröße (PX)

In kleinen Größen hat die feste 4px -Komponente einen größeren Einfluss. In großen Größen dominiert das 0,5EM -Verhältnis. Das Ergebnis ist eine natürlichere Skalierung in allen Größen.

sup, sub {
  font-size: calc(0.5em + 4px);
  /* ... */
}

sub { 
  /* ... */
}

Berechnen Sie die Schriftschriftengröße (EM)

Innerhalb der Elemente ^{und _{können wir die Schriftgröße des Elternteils berechnen:}}

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(2 * (1em - 4px));
}

sub { 
  top: calc(2 * (1em + 4px));
}

flüssige Schriftgröße wird als calc(0.5em 4px) definiert. Um 0,5EM auszugleichen, müssen wir zunächst 0,5EM * x = 1EM lösen und x = 2 erhalten. Hier repräsentiert 1EM die Schriftgröße der Elemente ^{und _{selbst. Wir subtrahieren die feste Komponente von 4px vom aktuellen EM -Wert vor dem Multiplikationsvorgang.}}

vertikaler Offset

Für vertikale Offsets beginnen wir mit dem Standard -CSS -Positionierungswert und passen ihn an unsere flüssige Skalierung an:

sup, sub {
  font-size: calc(0.5em + 4px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(-0.83em + 3.32px) */
}

sub {
  top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(0.42em - 1.66px) */
}

Diese Formel wurde sorgfältig kalibriert, um der Standard -Browser -Positionierung zu entsprechen:

• 0,5EM (Superscript) und 0,25EM (Index) sind die Standardversetzwerte für vertikale Offset (z. B. in Frameworks wie Rückenwind -CSS und Bootstrap).
• multiplizieren wir mit 0,83, um den Browser -Skalierungsfaktor zu berücksichtigen, der standardmäßig für Superscripts und Indexs verwendet wird. font-size: smaller

Diese Methode stellt sicher, dass unsere Superscripts und Indexs in vertrauten vertikalen Positionen bleiben und gleichzeitig von einer verbesserten Flüssigkeitsskalierung profitieren. Die Ergebnisse stimmen mit dem überein, was Benutzer von herkömmlichem Browser -Rendering erwarten, aber in verschiedenen Schriftarten auf natürliche Weise skaliert werden.

hilfreiche Tipps

Der genaue Skalierungsfaktor

basiert auf meiner Analyse von überschriften -Unicode -Zeichen in gemeinsamen Schriftarten. Sie können diese Werte nach Belieben anpassen, um Ihren spezifischen Designanforderungen entsprechen. Hier sind einige Möglichkeiten, wie Sie diese Methode anpassen können: font-size: (0.5em 4px)

für größere Skalierung:

sup, sub {
  font-size: calc(0.5em + 4px);
  /* ... */
}

sub { 
  /* ... */
}

für kleinere Skalierung:

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(2 * (1em - 4px));
}

sub { 
  top: calc(2 * (1em + 4px));
}

Für die Rückwärtskompatibilität möchten Sie möglicherweise alles in einen Block einwickeln: @supports

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px));
}

sub { 
  top: calc(0.25 * 0.83 * 2 * (1em - 4px));
}

endgültige Demo

Ich habe diese kleine interaktive Demo gebaut, um unterschiedliche Flüssigkeitskalierungsoptionen zu zeigen, sie mit der statischen Skalierung des Browsers und der feinstimmigen vertikalen Positionierung zu vergleichen, um zu sehen, was für Ihren Anwendungsfall am besten ist: (Der Demo-Link sollte hier eingefügt werden)

Probieren Sie es in Ihrem nächsten Projekt aus und ich würde gerne hören, was Sie denken!

Das obige ist der detaillierte Inhalt vonFluid -Superscripts und -Anendeschriften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!