Display a line-length guide on a non-wrapping text area

Question

I'd like to display a read-only block of text as part of an HTML page - as it happens, it will be the monospaced text of the user's Git commit message - and while I want to display the text without wrapping, I would like to display a vertical line-length guide at 72 characters, so it's clear to the user when their lines have gone over the recommended length.

In some cases, the user will have entered lines of text much wider than the viewport.

Can I achieve this kind of effect with CSS?

(as an aside, I'm not drastically in favour of the text-wrapping guidelines, but my users need to be aware of them)

Answer 1

It's not really that practical to do it via CSS, as css doesn't give you any type of an nth-character selector. You could only draw a line at a fixed width which would be a best guess at your font character width.

However, if you're ok using a small amount of javascript, it could easily be done.

Here is a code sample I made for you showing how: http://codepen.io/beneggett/pen/GJgVrp

SO wants me to paste the code here as well as codepen, so here it is:

HTML:

<p>Example of syntax highlighting code at 72 characters w/ minimal javascript & css.</p>
<pre>
  <code>
    Here is my really awesome code that is nice
    and it is so cool. If you are actually reading this, well I praise you for bearing with me 
    as you can see there is some short code
    and some really, really, really, really, really, really, really, really, long boring code that is longer than 72 characters
    it just goes on forever and ever and ever and ever and ever and ever and ever and ever and ever
    The nice thing is we can tell our users when the code is short
    or when it is getting way way way way way way way way way way way way way way way way way way way too looonggggg
    oh wait, this isn't really code, it's just some gibberish text. but that's ok; the point is well made
    i could go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on, but you'd get tired of it

    That's it for now
  </code>
</pre>

<p> This is just a simple example using tools that I'm comfortable with. There may be better methods to suit your needs, but it's a good start</p>

CSS:

pre{
  white-space: pre;
  background: #ececec;
  border: 1px solid #c3c3c3;
  overflow: auto; 
}
pre .long{
  border-left: 1px dotted red;
  color: red
}    

JS (CoffeeScript):

$(document).ready ->
  lines = $('pre code').text().split('\n')   # First we'll find all the lines of code
  $('pre code').text('')   # then, remove the old code, as we're going to redraw it with syntax highlighting 
  $.each lines, (n, elem) -> # Loop through each line
    if elem.length > 72 # If it's longer than 72 characters, we'll split the good_code and the long_code then add some html markup to differentiate
      good_code = elem.substring(0,71)
      long_code = elem.substring(71)    
      $('pre code').append "#{good_code}<span class='long'>#{long_code}</span>\n"
    else # otherwise we will just keep the original code
     $('pre code').append elem + '\n'

This was just a simple illustration using tools that are simple for me; but the point is to illustrate it's pretty simple code that could easily be adapted to what you're trying to do.