How to fix the width of textarea in number of characters? (cols attribute does NOT work)

Question

I want to specify the width of textareas in terms of the maximum numbers of monospace characters they should be able to hold in each line with neither excess le

Answer 1

It's debatable whether this qualifies as professional, but you can style the textarea to use a fixed width font

textarea {
    font-family: Courier;
}

and then set its width in either em or ex units. The exact width to use, however, will depend on the specific font and it may be subject to slight differences in browser font rendering. Here's an example on codepen.

With this approach the "fudge factor" won't have as wide as a variance (it's pretty much the same on all browsers), but you're limited to fonts that you're confident will be available on the client. Courier is probably the closest you can get to being safe in most cases.

Here's the result in Chrome:

Firefox:

and Safari:

As you can see, there are definite differences in how the browsers compute a default font size, but in all cases they correctly set the width of the text area to the specified number of characters.

Answer 2

The col attribute gives accurate results, but the width is somewhat larger than needed for the characters, since there is room for vertical scroll bar on the right (or left, depending on directionality). You can see this by entering a few more lines in the area.

You can remove the room for scroll bar by removing scrollability, using overflow: hidden.

An alternative to set the width in ch units, but browser support is more limited.

textarea {
    resize:none;
    background-color:lightgray;
    padding:0;
    font-family: monospace;
}
.fix {
    overflow: hidden;
}
.w18 {
    width: 18ch;
}

<textarea cols="18" rows="2">123456789012345678</textarea>
<p>See what happens when vertical scrolling is needed:<br>
<textarea cols="18" rows="2">123456789012345678
123
123</textarea>
<p>Fixed by removing space for scroll bar:<br>
<textarea cols="18" rows="2" class="fix">123456789012345678</textarea>
<p>Fixed by setting width in `ch` units:<br>
<textarea cols="18" rows="2" class="w18">123456789012345678</textarea>

As the demo shows, overflow: hidden also removes the space for a horizontal scroll bar. Browsers generally leave such a space, so that the area seems to have one row more than the value of rows, even though browsers normally do not show a horizontal scroll bar as they used to (they visually break lines instead). Using overflow-y: hidden instead keeps that space

You need to consider what the removal of scroll bars implies in terms of usability. If the intent is to show the user the maximum allowed line length, maybe you can do that by forcing a scroll bar instead of removing it.

<textarea cols="18" rows="2" style="overflow-y: scroll; overflow-x: hidden; resize: none">123456789012345678</textarea>