SVG を使用した <textarea> の行番号-CSSチュートリアル-php.cn

ホームページ >ウェブフロントエンド >CSSチュートリアル >SVG を使用したの行番号</p><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>SVG を使用した <textarea> の行番号</h1><div class="nphpQianTitleIn"><span><img data-src="https://img.php.cn/upload/avatar/000/465/014/627b58ba8fa6c600.jpg" alt="王林" class="lazyload" src="/static/front/mobimages/moren/moren.png" /></span><dl><dt><em>王林</em><i class='bg1'>オリジナル</i><div class="clear"></div></dt><dd><em>2024-08-19 18:33:32</em><i>531ブラウズ</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><p>先日、JSON スキーマジェネレーターに取り組んでいて、<textarea> に行番号を表示したいと思いました。派手なことは何もせず、ソフトな改行やそれほど複雑なことは考慮していません。</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 class="brush:php;toolbar:false">const prefix = '--linenum-'; </pre> <p> <br> </p>続行する前に、既存のプロパティを再利用するかどうかを確認します。<pre class="brush:php;toolbar:false">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 class="brush:php;toolbar:false">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 class="brush:php;toolbar:false">const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`; </pre> <p> <br> </p>そして今度は SVG をレンダリングします:<pre class="brush:php;toolbar:false">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 class="brush:php;toolbar:false">const encodedURI = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`; </pre> <p> <br> </p>そして最後に、要素またはドキュメント本体のいずれかにそのプロパティを設定します。<pre class="brush:php;toolbar:false">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> <p>以上がSVG を使用した <textarea> の行番号の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">json</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">safari</a> <a href="javascript:void(0);">Array</a> <a href="javascript:void(0);">define</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">require</a> <a href="javascript:void(0);">break</a> <a href="javascript:void(0);">continue</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">finally</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">background</a> <a href="javascript:void(0);">li</a> <a href="javascript:void(0);">zoom</a><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="初めての Web 開発プロジェクト: HTML と CSS の学習" href="https://m.php.cn/ja/faq/1796574374.html">初めての Web 開発プロジェクト: HTML と CSS の学習</a></span><span>次の記事：<a class="dBlack" title="初めての Web 開発プロジェクト: HTML と CSS の学習" href="https://m.php.cn/ja/faq/1796575869.html">初めての Web 開発プロジェクト: HTML と CSS の学習</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/841.html" title="CSSを書くときにBorderについて注意すべきことまとめ" class="aBlack">CSSを書くときにBorderについて注意すべきことまとめ</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/961.html" title="複数のスタイル選択とスタイルのリアルタイム切り替えを実現する方法_体験交流" class="aBlack">複数のスタイル選択とスタイルのリアルタイム切り替えを実現する方法_体験交流</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1345.html" title="マーキーの詳細な使用状況分析" class="aBlack">マーキーの詳細な使用状況分析</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/269082.html" title="CSSタイトル行の実装（行削除効果による行削除）" class="aBlack">CSSタイトル行の実装（行削除効果による行削除）</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/269606.html" title="CSS3 におけるグレースフルデグラデーションとプログレッシブエンハンスメントの違い" class="aBlack">CSS3 におけるグレースフルデグラデーションとプログレッシブエンハンスメントの違い</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script></html>