Div and textarea behave the same except in Firefox - what to do?

Question

I want to create a textarea which highlights the text beyond a character limit (like the twitter one).

My attempt is here: http://jsfiddle.net/X7d8H/1/

HTM

Answer 1

This has to do with the font size being used. Since the unit used is point (pt), the size calculated is different enough in the browsers to cause the incorrect line wrap.

Try these styles instead:

* {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: normal;
}

body {
    font-size: 1em;
}

JSFiddle

You might have to make changes in the container sizes to accomodate the change in font-size.

Answer 2

Okay, couple of things going on here. Generally, the safest cross-browser displayed element you'll find is the pre tag. It assumes that what you're feeding it is "pre-formatted," hence the name. This will benefit us in a couple ways:

1. As far as I know, there is no default styling done by any major browser done on the pre element.
2. The pre element will retain leading/trailing whitespace, tabs and other special characters in a box.

Replace the span.highlighter with pre.highlighter

That'll get us started. The second thing we'll want to look at is the overlaid colors creating some rather bizarre stacking effects in Firefox. The text looks out of focus in FF20, and I can only imagine that letting a browser decide how that looks would be a catastrophe going forward.

Set the color of the textarea to transparent.

Now we're there. I'm seeing consistent wrapping in IE10/9, FF20, and Chrome 26.

Here's an example jsFiddle

Answer 3

I think you are running into an issue where Firefox adds 1.5px of padding inside textarea elements.

Firefox has had quite some issues with paddings in combination with textareas in the past, I think you might not be able to get rid of these additional 1.5px of padding.

I was able to fix your wrapping issue by setting some vendor specific prefixed CSS properties on div.highlighter. Here's a jsFiddle.

.highlighter {
  background-color: #eee;
  color: #f0f;
  -moz-box-sizing: border-box;
  -moz-padding-end: 1.5px;  
  -moz-padding-start: 1.5px;      
}

Setting these properties ensures that

1. In Firefox, the padding set on the div does not increase the width of the div, and
2. that, in Firefox, 1.5px of padding will be set on both the right and the left hand side of the div.

Update

After some time of using 2px and still very occasionally experiencing some wrapping inconsistencies, I decided to give 1.5px a go, and for now that seems to have ironed out the occasional inconsistencies.