先日、JSON スキーマ ジェネレーターに取り組んでいて、 に行番号を表示したいと思いました。派手なことは何もせず、ソフトな改行やそれほど複雑なことは考慮していません。</p> <p>いくつか調査したところ、複数のアプローチが見つかりました:</p> <ol> <li>背景画像の使用 (TinyMCE は PNG を使用して行います)</li> <li><ol> の使用順序付けられたリスト。 </ol></li> </ol> <p>どれも気に入らなかったです!最初のものは見た目が鮮明ではなく、<textarea>要素用にすでに用意されているスタイルと一致しませんでした。</p> <p>2 番目の方法では、順序付きリストを維持するために大量の JavaScript が必要でした。</p> <p> </p> <p>そこで私は最終的にハイブリッドを作成することになりました。 <em> </em>これは動的に生成された SVG で、</p>CSS カスタム プロパティ<p> として保存され、親の <textarea> 要素からスタイルを継承して背景画像として使用されます。<img src="https://img.php.cn/upload/article/000/000/000/172406361393154.png" alt="Line Numbers for <textarea> </p><p> SVG を使用する"> 早速見てみましょう。 JavaScript まず、メインメソッド:lineNumbers(element, numLines = 50, inline = false) 要素はです。使用する要素、numLines はレンダリングする行数、inline は、生成されたイメージを要素 (true) に保存するか、document.body (false) に保存するかを示します。<br> </p>次に、カスタム プロパティのプレフィックスを定義します。<pre>const prefix = '--linenum-'; </pre> <p> <br> </p>続行する前に、既存のプロパティを再利用するかどうかを確認します。<pre>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; } } </pre> <p> <strong> </strong>次に、要素からスタイルを<br>抽出</p>し、同じフォントファミリー、フォントサイズ、行の高さなどでSVGをレンダリングします。<pre>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); </pre> <p> <br> </p>プロパティのランダム ID も必要です:<pre>const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`; </pre> <p> <br> </p>そして今度は SVG をレンダリングします:<pre>const svg = `<svg xmlns="http://www.w3.org/2000/svg"> <style> svg { background: ${bgColor}; } text { fill: hsl(from ${fillColor} h s l / 50%); font-family: ${fontFamily}; font-size: ${fontSize}px; line-height: ${lineHeight}; text-anchor: end; translate: 0 calc((var(--n) * ${translateY}px) + ${paddingTop}px); } </style> ${Array.from({ length: numLines }, (_, i) => `<text x="90%" style="--n:${i + 1};">${i + 1}</text>`).join("")} </svg>`; </pre> <p> <strong> </strong></p>詳しく見てみましょう:<p></p> <p><style> セクションでは、<textarea> から抽出したスタイルを設定するだけです。以前。 <text>要素に y 属性と dy 属性を使用する代わりに、--n-property を使用して、CSS を使用して text 要素を翻訳します。</p> <p>最後の部分は、numLines から作成された配列を反復し、<text> 要素をメイン SVG に追加します。</p> <hr>もうすぐです!<p> <strong> </strong>生成された SVG を url() プロパティとして使用するには、次のように <br>エンコード</p>する必要があります。<pre>const encodedURI = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`; </pre> <p> <br> </p>そして最後に、要素またはドキュメント本体のいずれかにそのプロパティを設定します。<pre>const target = inline ? element : document.body; target.style.setProperty(id, encodedURI); element.style.backgroundImage = `var(${id})`; </pre> <p> <strong> </strong></p>以上です!<p></p> <hr>それほど悪くはありません。縮小および圧縮されてもわずか 610 バイトです!<h2> </h2> <p> デモ </p> <p>デモはここで見ることができ、完全なスクリプトはここからダウンロードできます。</p> <p>以下は、インライン プロパティ ロジックを使用しない、簡略化された Codepen です。<iframe height="600" src="https://codepen.io/stoumann/embed/LYKQZKr?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy" style="width: 100%;"> </iframe></p> <hr> <h2> </h2> <p> 長所と短所 </p> <p>長所と短所はありますか?もちろんありますよ！ </p> <h3>個人的には、現在のプロジェクトでは、<textarea> 内の JSON プレビューに行番号を追加するシンプルで鮮明な方法が必要でした。この方法はその目的に適しています。</h3> <h4> 長所 </h4> <p> DOM 操作の削減 </p> <h4>このメソッドは DOM の操作に依存しません。行番号は単一の SVG として生成され、CSS カスタム プロパティ内に保存されます。</h4> <p> 自動同期 </p> <h4>行番号は背景画像の一部であるため、テキストの内容とともに自動的にスクロールし、手動の同期ロジックが不要になります。</h4> <p> 要素間での再利用性 </p> <h4>生成された SVG を CSS カスタム プロパティに保存すると、複数の要素間で再利用できます。これは、複数の要素が同じ行番号を必要とする場合、それらはすべて同じカスタム プロパティを参照でき、冗長な SVG 生成を回避できることを意味します。</h4> <h2> スケーラビリティ </h2> <h3> SVG のベクトルの性質により、どのズーム レベルでも行番号が鮮明かつ鮮明に保たれます。 </h3> <h4> 短所 </h4> <p> アクセシビリティ </p> <h4>順序付きリストはスクリーン リーダーや支援技術にとってアクセスしやすいですが、SVG ベースの行番号は無視されたり、誤解されたりする可能性があります。</h4> <p> カスタマイズの複雑さ </p> <h4>順序付きリスト内の個々の行番号のスタイル設定と操作は簡単です。対照的に、SVG アプローチでは、特定の行番号をカスタマイズしたり、インタラクティブ機能を追加したりすることがより困難になります。</h4> <p> ブラウザの互換性 </p> SVG および CSS のカスタム プロパティは、すべてのブラウザーで一貫してレンダリングされない可能性があります。現在の実装では Safari に問題があり、translateY から (paddingTop / 10) を差し引く必要があります。<h4> 動的なコンテンツの処理 </h4> <p>順序付きリストは、行の追加や削除などの動的なコンテンツ更新をより柔軟に処理できますが、SVG アプローチでは背景画像全体の再生成と再適用が必要になる場合があります。</p>