Home >Web Front-end >CSS Tutorial >Line Numbers for using SVG</p><!-- <p><a href="https://m.php.cn/article.html" class="cBlack">Technical Articles</a>  >  <a href="https://m.php.cn/web-designer.html" class="cBlack">Web Front-end</a> > <a href="https://m.php.cn/css-tutorial.html" class="cBlack">CSS Tutorial</a> > Line Numbers for <textarea> using SVG</p> --><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>Line Numbers for <textarea> using SVG</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'>Original</i><div class="clear"></div></dt><dd><em>2024-08-19 18:33:32</em><i>538browse</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><p>The other day I was working on a JSON Schema Generator, and wanted to display line numbers in a <textarea>. Nothing fancy, and not considering soft line-breaks or anything remotely complicated.</p> <p>I did some research, and found multiple approaches:</p> <ol> <li>Using a background-image (TinyMCE does that, using a PNG)</li> <li>Using an <ol> ordered list. </li> </ol> <p>I did not like any of them! The first one didn't look crisp — and didn't match the styles I already had in place for my <textarea>-elements.</p> <p>The second one required a bunch of JavaScript to maintain that ordered list: adding/removing <li>-elements dynamically, syncing scroll-events and much more.</p> <p>So I ended up creating a hybrid. </p> <p>It's a dynamically generated SVG, stored as a <em>CSS Custom Property</em> — and used as a background-image, inheriting the styles from it's parent <textarea>-element.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172406361393154.png" alt="Line Numbers for <textarea> using SVG"></p> <p>Let's dive in.</p> <hr> <h2> JavaScript </h2> <p>First, the main method:<br> </p> <pre class="brush:php;toolbar:false">lineNumbers(element, numLines = 50, inline = false) </pre> <p>element is the <textarea> element to use, numLines the number of lines to render, and inline indicates whether to store the generated image on element (true), or on document.body (false).</p> <p>Next, we define a prefix for the custom property:<br> </p> <pre class="brush:php;toolbar:false">const prefix = '--linenum-'; </pre> <p>Before we continue, we check whether to re-use any existing property:<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>Next, we <strong>extract</strong> styles from element, rendering the SVG with the same font-family, font-size, line-height etc. :<br> </p> <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>We need a random id for our property as well:<br> </p> <pre class="brush:php;toolbar:false">const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`; </pre> <p>And now it's time to render the SVG:<br> </p> <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>Let's break it down:</strong></p> <p>In the <style>-section we simply set the styles we extracted from the <textarea> earlier. Instead of using y and dy attributes for the <text>-elements, we simply use a --n-property to translate the text-elements using CSS.</p> <p>The last part iterates an array created from numLines, and appends the <text>-elements to the main SVG.</p> <p>We're almost there!</p> <hr> <p>To use the generated SVG as a url()-property, we need to <strong>encode</strong> it:<br> </p> <pre class="brush:php;toolbar:false">const encodedURI = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`; </pre> <p>And finally, we set that property on either element or document-body:<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>And that's it!</strong></p> <p>Not too bad, and only 610 bytes, minified and compressed!</p> <hr> <h2> Demo </h2> <p>You can see a demo here, and dowload the full script here.</p> <p>Below is a simplified Codepen, not using the inline-property logic:</p> <p><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> Pros and Cons </h2> <p>Are there pros and cons? Of course there are! </p> <p>Personally — for my current project — I needed a simple, crisp way of adding line numbers to a JSON-preview within a <textarea>, and this method fits the bill.</p> <h3> Pros </h3> <h4> Reduced DOM Manipulation </h4> <p>This method does not rely on manipulating the DOM. The line numbers are generated as a single SVG, stored within a CSS Custom Property.</p> <h4> Automatic Synchronization </h4> <p>Since the line numbers are part of the background image, they automatically scroll with the text content, eliminating the need for manual synchronization logic.</p> <h4> Reusability Across Elements </h4> <p>By storing the generated SVG in a CSS Custom Property, it can be reused across multiple elements. This means that if several elements require the same line numbers, they can all reference the same custom property, avoiding redundant SVG generation.</p> <h4> Scalability </h4> <h2> The vector nature of SVG ensures that the line numbers remain crisp and clear at any zoom level. </h2> <h3> Cons </h3> <h4> Accessibility </h4> <p>Ordered lists are more accessible to screen readers and assistive technologies, while SVG-based line numbers might be ignored or misinterpreted.</p> <h4> Customization Complexity </h4> <p>Styling and interacting with individual line numbers in an ordered list is straightforward. In contrast, the SVG approach makes it more difficult to customize or add interactivity to specific line numbers.</p> <h4> Browser Compatibility </h4> <p>SVG and CSS custom properties might not render consistently across all browsers — the current implementation has issues with Safari, where we need to deduct (paddingTop / 10) from translateY.</p> <h4> Dynamic Content Handling </h4> <p>Ordered lists can be more flexible for handling dynamic content updates, such as adding or removing lines, whereas the SVG approach might require regenerating and reapplying the entire background image.</p> <p>The above is the detailed content of Line Numbers for <textarea> using SVG. For more information, please follow other related articles on the PHP Chinese website!</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>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="My First Web Development Project: Learning HTML and CSS" href="https://m.php.cn/faq/1796574374.html">My First Web Development Project: Learning HTML and CSS</a></span><span>Next article：<a class="dBlack" title="My First Web Development Project: Learning HTML and CSS" href="https://m.php.cn/faq/1796575869.html">My First Web Development Project: Learning HTML and CSS</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</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/faq/841.html" title="Summary of what you must pay attention to about Border when writing CSS" class="aBlack">Summary of what you must pay attention to about Border when writing CSS</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/961.html" title="How to realize multi-style selection and real-time switching of styles_Experience exchange" class="aBlack">How to realize multi-style selection and real-time switching of styles_Experience exchange</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1345.html" title="Detailed usage analysis of marquee" class="aBlack">Detailed usage analysis of marquee</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/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>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/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><!-- Matomo --><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><!-- End Matomo Code --></html>