CODEWITHSUNDEEP
htmlcsstextareatypography
Vadim
Vadim

Reputation: 538

Understanding of css textarea offsets

I made a simple example of textarea on jsfiddle with font-size and line-height.

JSFiddle textarea

textarea {
    font-size: 20px;
    line-height: 4;
    height: 260px;
}

<textarea>
A
A
A
</textarea>

Offsets between lines Small caret Big caret

1) How does browser calculate the AREA_1 height and the AREA_2 height? Why are they different?

2) How does browser calculate the caret size in the textarea? Why does the caret at the first line is much smaller that at the second line?

Upvotes: 0

Views: 485

Answers (2)

Stickers
Stickers

Reputation: 78676

It turns out it is a bug on Chromium: Cursor line-height bug on inputs

CSS uses what is known as half-leading to render lines of text. This is determ­ined by work­ing out the dif­fer­ence between the line-height and the font-size, divid­ing by 2, and then pla­cing the cal­cu­lated amount of space above and below each line of text. So if you have a font-size of 16px and an effect­ive line-height of 24px, the half-leading would be 4px.

By Joshua Hibbert.

Upvotes: 1

Catshinski
Catshinski

Reputation: 53

1) I think the browser uses equal heights above and below one line. Like so:

-----

A

-----

A

-----

2) In my browser (Firefox) the caret is always the same size.

Upvotes: 0

Related Questions