Am Ende habe ich einen Hybrid erstellt.

Es handelt sich um eine dynamisch generierte SVG-Datei, die als benutzerdefinierte CSS-Eigenschaft gespeichert und als Hintergrundbild verwendet wird, wobei die Stile vom übergeordneten -Element übernommen werden.

Lass uns eintauchen.

JavaScript

Zuerst die Hauptmethode:

lineNumbers(element, numLines = 50, inline = false)

element ist das zu verwendende -Element, numLines gibt die Anzahl der zu rendernden Zeilen an und inline gibt an, ob das generierte Bild im Element (true) oder in document.body (false) gespeichert werden soll.

Als nächstes definieren wir ein Präfix für die benutzerdefinierte Eigenschaft:

const prefix = '--linenum-';

Bevor wir fortfahren, prüfen wir, ob eine vorhandene Eigenschaft wiederverwendet werden soll:

if (!inline) {
  const styleString = document.body.getAttribute('style') || '';
  const regex = new RegExp(`${prefix}[^:]*`, 'g');
  const match = styleString.match(regex);

  if (match) {
    element.style.backgroundImage = `var(${match[0]})`;
    return;
  }
}

Als nächstes extrahieren Stile aus dem Element und rendern das SVG mit derselben Schriftfamilie, Schriftgröße, Zeilenhöhe usw.:

const bgColor = getComputedStyle(element).borderColor;
const fillColor = getComputedStyle(element).color;
const fontFamily = getComputedStyle(element).fontFamily;
const fontSize = parseFloat(getComputedStyle(element).fontSize);
const lineHeight = parseFloat(getComputedStyle(element).lineHeight) / fontSize;
const paddingTop = parseFloat(getComputedStyle(element).paddingTop) / 2;
const translateY = (fontSize * lineHeight).toFixed(2);

Wir benötigen auch eine zufällige ID für unsere Immobilie:

const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`;

Und jetzt ist es an der Zeit, das SVG zu rendern:

const svg = ``;

Lassen Sie es uns aufschlüsseln:

Im

Der letzte Teil iteriert ein aus numLines erstelltes Array und hängt die -Elemente an die Haupt-SVG an.

Wir sind fast da!

Um das generierte SVG als URL()-Eigenschaft zu verwenden, müssen wir es kodieren:

const encodedURI = `url("data:image/svg xml,${encodeURIComponent(svg)}")`;

Und schließlich legen wir diese Eigenschaft entweder für das Element oder den Dokumentkörper fest:

const target = inline ? element : document.body;
target.style.setProperty(id, encodedURI);
element.style.backgroundImage = `var(${id})`;

Und das ist es!

Nicht schlecht und nur 610 Bytes, minimiert und komprimiert!

Demo

Sie können sich hier eine Demo ansehen und das vollständige Skript hier herunterladen.

Unten ist ein vereinfachter Codepen, der nicht die Inline-Eigenschaftslogik verwendet:

Für und Wider

Gibt es Vor- und Nachteile? Natürlich gibt es sie!

Ich persönlich brauchte – für mein aktuelles Projekt – eine einfache, klare Möglichkeit, Zeilennummern zu einer JSON-Vorschau innerhalb eines hinzuzufügen, und diese Methode ist genau das Richtige.

Vorteile

Reduzierte DOM-Manipulation

Diese Methode basiert nicht auf der Manipulation des DOM. Die Zeilennummern werden als einzelnes SVG generiert und in einer benutzerdefinierten CSS-Eigenschaft gespeichert.

Automatische Synchronisierung

Da die Zeilennummern Teil des Hintergrundbilds sind, scrollen sie automatisch mit dem Textinhalt, sodass keine manuelle Synchronisierungslogik erforderlich ist.

Wiederverwendbarkeit über Elemente hinweg

Durch die Speicherung der generierten SVG-Datei in einer benutzerdefinierten CSS-Eigenschaft kann sie über mehrere Elemente hinweg wiederverwendet werden. Das bedeutet, dass, wenn mehrere Elemente dieselben Zeilennummern erfordern, alle auf dieselbe benutzerdefinierte Eigenschaft verweisen können, wodurch eine redundante SVG-Generierung vermieden wird.

Skalierbarkeit

Der Vektorcharakter von SVG stellt sicher, dass die Zeilennummern bei jeder Zoomstufe klar und deutlich bleiben.

Nachteile

Zugänglichkeit

Geordnete Listen sind für Screenreader und unterstützende Technologien besser zugänglich, während SVG-basierte Zeilennummern möglicherweise ignoriert oder falsch interpretiert werden.

Komplexität der Anpassung

Die Gestaltung und Interaktion mit einzelnen Zeilennummern in einer geordneten Liste ist unkompliziert. Im Gegensatz dazu macht es der SVG-Ansatz schwieriger, bestimmte Zeilennummern anzupassen oder ihnen Interaktivität hinzuzufügen.

Browserkompatibilität

Benutzerdefinierte SVG- und CSS-Eigenschaften werden möglicherweise nicht in allen Browsern konsistent dargestellt – die aktuelle Implementierung hat Probleme mit Safari, wo wir (paddingTop / 10) von TranslateY abziehen müssen.

Dynamische Inhaltsverarbeitung

Geordnete Listen können flexibler für die Handhabung dynamischer Inhaltsaktualisierungen sein, z. B. das Hinzufügen oder Entfernen von Zeilen, während der SVG-Ansatz möglicherweise die Neugenerierung und erneute Anwendung des gesamten Hintergrundbilds erfordert.