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

A pre-calculated distance for the "red line" doesn't seem reliable to me. A background with 50 characters in exactly the same font as used in the textarea might do the trick. This suggestion still relies on a fixed height for the background, which is not good if the height of the textarea needs to be flexible.

<style type="text/css">
    * {
        font-family: monospace;
    }
    .textarea-wrapper {
        position: relative;
        width: 600px;
        height: 400px;
        overflow: hidden;
        background-color: #fff; 
    }
    textarea {
        position: absolute;
        width: 600px;
        height: 400px;
        background-color: transparent;
        border-width: 2px;
    }
    span {
        position: absolute;
        top: 2px;
        left: 2px;
        display: block;
        width: auto;
        height: 100%;
        border-right: 2px dotted #fcc;
        color: #fff;
    }
</style>

<div class="textarea-wrapper">      
    <span>01234567890123456789012345678901234567890123456789</span>
    <textarea readonly="readonly">01234567890123456789012345678901234567890123456789 - 50 characters and more
    </textarea>
</div>

Answer 2

You definitely want a monospaced font. You can include one like Paul Hunt's Source Code Pro (Google Fonts) with the following CSS:

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

Then, structure your commit message in a div like the one below. (Note the empty guide div):

<div class="commit-message">
  Commit message goes here.
  <div class="guide">&nbsp;</div>
</div>

..and apply this CSS:

.commit-message {
  font-family:"Source Code Pro", sans-serif;
  font-size: 12px;
  position: relative;
}
.commit-message .guide {
  position: absolute;
  top: 0;
  height:100%;
  width: 43em;
  border-right: 2px dashed red;
}

Depending on the font-size you apply in the first rule, you may need to adjust the width in the second rule.

Here's a fiddle showing it in action: http://jsfiddle.net/yjjybtLu/4/

Answer 3

Many of these suggestions will work most of the time. But positioning at absolute pixels will break if the user has set their default font size to something other than what you had intended.

Use a scalable unit like em or rem to set your font size. Then figure out how many ems or rems a single character width is, and position your vertical line marker at 72 x the character width.

example:

div#container {
  position: relative;
  font-size: 1rem;
}

if you haven't changed your default font size, 1rem will equal 16px. (If you have, reset you font-size to default in your browser before continuing) Now measure a single character, or a line of characters and average it out. (take a screenshot and pull it into Photoshop or Gimp to do this) Divide the single character width by 16, and you'll get the character width in rem.

eg:

character width = 9px;
9 / 16 = 0.5625rem;

multiply by 72 to figure out positing:

72 characters = 0.5625 * 72 = 40.5rem

now position your vertical line:

div#container .verticalLine {
  position: absolute;
  top: 0rem;
  left: 40.5rem;
}

This sets up the positioning based on font size, not pixels. So it will scale with the font size accordingly.

If you want a large font-size (say 1.5rem), then multiply your calculated 72 character by the desired font size.

40.5rem * 1.5 = 60.75rem

n.b. If you don't want to measure exactly, or you don't have a graphics program, then you can just adjust the positioning by trial and error until it's positioned in the right spot.

Answer 4

Enhancing Kalyan Kumar S's recipe.

Here is fiddle: http://jsfiddle.net/4mu5Lwex/

HTML:

<div class="git-msgs-container">
<p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
<p>_________1_________2_________3_________4_________5_________6_________7_________</p>
<p>1234567890123456789012345678901234567890123456789012345678901234567890123456789</p>
</div>

It looks that for a font-size of 10pt, the width of the each character is 6pt so the vertical line is at 72x6 = 432pt.

CSS:

.git-msgs-container {
    width: 900px;
    border: 1px solid red;
    font-family: 'Courier New';
    font-size: 10pt;
    position: relative;
}

.git-msgs-container p::after {
    display:block;
    position: absolute;
    left: 432pt;
    top: 0;
    margin-top: 0;
    height: 100%;
    border-left: 1px solid blue;
    content: '';
}

Answer 5

As said by Ben Eggett use Monospaced fonts because

"A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space."

Even 'l' and 'm' occupy the same space. So find out how much width each char occupies based on the font size you are using and the vertical line at that place of the container.

For other fonts the widths for each characters are different and since CSS is static you cannot do with just css.

Below jsfiddle link provides example of implementation using monospaced font "Courier New"

http://jsfiddle.net/mnLzyy2x/

<div class="git-msgs-container">
    <p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
    <div class="separator"></div>
</div>

Css is

.git-msgs-container {
    width: 900px;
    border: 1px solid red;
    font-family: 'Courier New';
    font-size: 15px;
    position: relative;
}

p {
    margin: 0;
    padding: 0;
}

.separator {
    height: 100%;
    border-left: 1px solid blue;
    position: absolute;
    top: 0;
    left: 648px;
}

Answer 6

Use a monospaced typeface like courier new, figure out how wide 72 characters is and lay a div underneath your text with that width and dashed right border.

Answer 7

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.