marijnh/CodeMirror — pull request #1234 by jmendeth (2013-02-11 12:33:42+00:00)
Title: Vertical Grid

Open a terminal or an IDE, select something and look at the shape
of the selection. Its "top" and "bottom" lands *exactly between two lines*.
This is more easier to see if the active line is highlighted.

On a browser, this is also true... under you wrap each line in his own
block (which is what CodeMirror2 and ACE do). Then, each line's bounds
separate a bit, yielding something like this:

![That odd selection.](https://f.cloud.github.com/assets/1177304/144899/7f17377e-7442-11e2-816b-6ab0a138f091.png)

Let's look at it closer. Compare the actual line with the selection shape:

![In depth...](http://i.imgur.com/KwW5AqN.png)

This affects not only the selection, but the cursor and some other things.
**Note:** if the `line-height` of the lines is not set, nothing of this happens.

## The problem

This appears because of the one-block-per-line model, which is essential for
CodeMirror to work (with line widgets, for example).

Actually, CodeMirror **draws the selection correctly**, because if you start
your selection from outside CodeMirror, the effects are the same.

However, this is odd and we should have a way to avoid it.

## The fix

What we do is add an option `verticalGrid` that, when enabled,
causes CodeMirror to round the character measures so that
**thier `top` and `bottom` coordinates are always a multiple of
the `line-height`**.

Everything looks good now:

![sel2](https://f.cloud.github.com/assets/1177304/144968/9fe035c4-7446-11e2-89ab-6f5d853f0652.png)

## The implementation

If the option is disabled (the default), this feature adds
one `if` for every line, and another for every character.

Some browsers may not have `getComputedStyle`, or
may return incorrect values (like `normal`). In this case,
CodeMirror ignores this option.