先日、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>次に、カスタム プロパティのプレフィックスを定義します。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const prefix = '--linenum-'; </pre><div class="contentsignin">ログイン後にコピー</div></div> <p> <br> </p>続行する前に、既存のプロパティを再利用するかどうかを確認します。<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div> <p> <strong> </strong>次に、要素からスタイルを<br>抽出</p>し、同じフォントファミリー、フォントサイズ、行の高さなどでSVGをレンダリングします。<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div> <p> <br> </p>プロパティのランダム ID も必要です:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`; </pre><div class="contentsignin">ログイン後にコピー</div></div> <p> <br> </p>そして今度は SVG をレンダリングします:<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div> <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>する必要があります。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const encodedURI = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`; </pre><div class="contentsignin">ログイン後にコピー</div></div> <p> <br> </p>そして最後に、要素またはドキュメント本体のいずれかにそのプロパティを設定します。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre>const target = inline ? element : document.body; target.style.setProperty(id, encodedURI); element.style.backgroundImage = `var(${id})`; </pre><div class="contentsignin">ログイン後にコピー</div></div> <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>
