そこで、最終的にハイブリッドを作成することになりました。

これは動的に生成された SVG で、CSS カスタム プロパティ として保存され、親の 要素からスタイルを継承して背景画像として使用されます。

詳しく見てみましょう。

JavaScript

まず、メインメソッド:

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

element は使用する 要素、n​​umLines はレンダリングする行数、inline は生成されたイメージを element (true) に保存するか document.body (false) に保存するかを示します。

次に、カスタム プロパティのプレフィックスを定義します:

const prefix = '--linenum-';

続行する前に、既存のプロパティを再利用するかどうかを確認します:

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;
  }
}

次に、要素からスタイルを抽出し、同じフォントファミリー、フォントサイズ、行の高さなどでSVGをレンダリングします。 :

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);

プロパティのランダム ID も必要です:

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

そして今度は SVG をレンダリングします:

const svg = ``;

詳しく見てみましょう:

最後の部分は、numLines から作成された配列を反復し、 要素をメイン SVG に追加します。

もうすぐです!

生成された SVG を url() プロパティとして使用するには、それを エンコードする必要があります:

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

そして最後に、要素またはドキュメント本体のいずれかにそのプロパティを設定します:

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

以上です!

それほど悪くはありません。縮小および圧縮されてもわずか 610 バイトです!

デモ

ここでデモをご覧になり、完全なスクリプトをここでダウンロードできます。

以下は、インライン プロパティ ロジックを使用しない、簡略化された Codepen です:

長所と短所

メリットとデメリットはありますか？もちろんありますよ！

個人的には、現在のプロジェクトでは、 内の JSON プレビューに行番号を追加するシンプルで鮮明な方法が必要でした。この方法はその目的に適しています。

長所

DOM 操作の削減

このメソッドは DOM の操作に依存しません。行番号は単一の SVG として生成され、CSS カスタム プロパティ内に保存されます。

自動同期

行番号は背景画像の一部であるため、テキストの内容とともに自動的にスクロールし、手動の同期ロジックが不要になります。

要素間での再利用性

生成された SVG を CSS カスタム プロパティに保存することで、複数の要素間で再利用できます。これは、複数の要素が同じ行番号を必要とする場合、それらはすべて同じカスタム プロパティを参照でき、冗長な SVG 生成を回避できることを意味します。

スケーラビリティ

SVG のベクトルの性質により、どのズーム レベルでも行番号が鮮明かつ鮮明に保たれます。

短所

アクセシビリティ

順序付きリストはスクリーン リーダーや支援技術にとってアクセスしやすくなりますが、SVG ベースの行番号は無視されたり、誤解されたりする可能性があります。

カスタマイズの複雑さ

順序付きリスト内の個々の行番号のスタイル設定と操作は簡単です。対照的に、SVG アプローチでは、特定の行番号をカスタマイズしたり、インタラクティブ機能を追加したりすることがより困難になります。

ブラウザの互換性

SVG と CSS のカスタム プロパティは、すべてのブラウザーで一貫してレンダリングされない可能性があります。現在の実装では Safari に問題があり、translateY から (paddingTop / 10) を差し引く必要があります。

動的なコンテンツの処理

順序付きリストは、行の追加や削除など、動的なコンテンツの更新をより柔軟に処理できますが、SVG アプローチでは背景画像全体を再生成して再適用する必要がある場合があります。