Study on the relationship between HTML textarea cols,rows attribute and width height

First, about the cols and rows properties of the TEXTAREA element

<textarea>Elements, commonly known as "text fields", or "Multiline text boxes", whose own native HTML attribute represents the rows meaning of the line, can change the <textarea> visible area height, which cols represents the <textarea> width of the visible area of the column that can be changed. For example:

JavaScript

12	<textarea></textarea> <textarea cols="$" rows="5"></textarea >

It will be found that the following dimensions are significantly larger than those with no cols and rows attribute values.

Here's the question, I think a lot of small partners know cols and rows can affect the size of the text field, cols and what does that have to do with the rows different values and the size of the final displayed pixel? Can it be calculated by formula? Is the final performance also affected by other CSS properties?

I think that few of the above questions have been known, including me, before writing this article, but also vaguely understand.

Here is a bit of nonsense, writing this article, I am actually lonely inside. This feeling is like a person going to the wilderness to find a fishing field, you know there is a river ahead, as to where it is not suitable for fishing, is not known, you want to know the results, you need to personally confirm. However, before the road to the river bank, no one walked by, that is, there is no road, and stand in front of the high-level barren grassland, they are so high and so far, it seems that the head, you do not know what is dangerous in the grass, poisonous boar can appear at any time. However, follow their own enthusiasm, or resolutely go to the path of the unknown, the vegetation is so dense, they can only use their hands to push through them, the foot to move forward, with barbed stems and vines, blade-like leaves, on the hands of the face left a scar, when you forward half, To the whole grass in the middle of the wild, there is no one around, only a gentle breeze to wipe the leaves of the tangled, a feeling of loneliness spontaneously, at this moment, then the strong heart will hesitate, I would like to continue to move forward ...

Yes, I'm going to move on!? In recent times, a sentence has a big impact on my heart, and repeatedly mentioned, that is, "what is the purpose of your doing this thing?" ”

"Please, do not engage in such utilitarian, do not make so tired good, I am the pursuit of the heart, I am the interest!" "The first reaction in my mind was this.

However, when suddenly looked up, found that there is no one around, full of thorns, the heart will hesitate, like this article, if not to talk about the utilitarian, the purpose, really nothing, there is value? Does anyone care? Is it worth the time to spend out? Why are you doing something that nobody cares about? Why not focus on the fashionable things that help the project? Why do others fly in the sky, and you will walk alone in the thorn bushes? (Video below: Passers-by on the street blackboard write down their biggest regret in this life)

So, all out go, I continue my progress, through the grass has not crossed, to the waiting river, to find their own longing for the fishing virgin land.

Second, cols attribute value and Width

You can fiercely click here: TextArea Text field cols properties and Width relationship Demo

The interface is as follows:

We can choose to change the text size, font and character spacing of the field to see if it will affect the width of the text field. The results are as follows:

	Chrome	IE	FireFox
Font-size	√	√	√
Font-family	X	X	√
Letter-spacing	X	√	√

As you can see, the Chrome browser is only affected by the size of the characters, ignoring the font and character spacing, while the Firefox browser affects each one, and IE is not affected by the character spacing.

What is the most concerned question, cols the value and the final width of the presentation, is there anything like a relationship or a formula?

In the SimSun font, that is, under the song body, we can easily see the relationship between:

• Chrome: 8px * cols + 17px
• IE: 8px * cols + 17px
• FireFox: 8px * cols + 29px

Because css,html these things are invented by foreigners, therefore, the cols relative width of each unit is relative to the English characters, in the song body, can be considered 8px , the latter is 17px actually very good understanding, indicating the width of the scroll bar. In the window system, by default, all browser scroll bars occupy a width of 17 pixels. So, for Chrome and IE, the final width of the text field ( padding and border dimensions are not considered) is the single character width * cols value + scrollbar width. However, under the Firefox browser, the added width is 29px that this does not make it clear what is being asked 29px .

In IE, if the overflow property value is hidden , there is no subsequent increase 17px , while other browsers do not have this behavior.

Then, when we use other fonts, the final width is more subtle. Therefore, a single cols corresponding unit is not an integer, which may 8.1px or may not be 7.7px~7.8px the same.

A summary is:
Seems to be a bit of a practical value in chrome, because the width fluctuations in other browsers are too obvious, and any other changes in the environment will result in a different width, which is really bad in the layout of the page. Because, the Web page is a top-down flow, height can be very long, but the width is generally fixed, the resources are tense, the layout is accurate, so, once the width in the browser is not the same situation, will greatly affect its practical value. Therefore, in the actual web authoring time, unless some of the width requirements are not high, the rest of the time, or the use width of CSS properties to control the width of the text field.

Three, rows property values and heights

You can really click here: TextArea Text field rows property and height relationship Demo

The interface is as follows:

We can choose to drop the text size, font, and line in the field to see if it will affect the height of the text field. The results are as follows:

	Chrome	IE	FireFox
Font-size	X	√	X
Font-family	X	√	X
Line-height	√	X	√

As you can see, the Chrome browser and Firefox browser are only affected by the row height, ignoring the font and character size, while IE is completely opposite, line-height ignoring the line height, but it has an effect on the character size and font.

What is the most concerned question, rows the value and the height of the final presentation. Are there any relationships or formulas (without consideration padding and border influence)?

In the Chrome browser, the final height is the rows product of the value and the line-height line height. As shown in the demo above, the rows values are 2 , for the time being, the line-height 20px final height is the 40px product of them.

In the Firefox browser is similar, but a little different, is the height of the scroll bar to calculate the size, therefore, the following scene, the height is higher than the Chrome browser 17px :

In Internet Explorer, height is not the same as the height of the line, it is more like a text (the concept of the content area inline box model) is determined, because when the different font switching, the height will be higher, for example, the use of Microsoft Ya Black font will be high obviously, and Microsoft ya Black content area Height is higher than the average font. Therefore, to determine the height of the text field and its relationship to the character, it is difficult to determine the computational factor: the height =rows* coefficient. For example, 16px the Microsoft Ya-black font coefficient approximation 21 (see), the song Body SimSun is 18.2~18.5 and so on.

A summary is:
Compatibility is still a mess, no two browsers are exactly the same performance. But the final performance is a little bit better than the design cols . The more critical problem is that the height of this thing is generally not so strict, so, we sometimes do not want to re-engage in a CSS to confirm the height of the text field, using rows the property values to do it is also possible.

Iv. Final concluding remarks

The result of the final study is that compatibility is poor and it is expensive to want to behave exactly the same in every browser. Therefore, if the layout requirements for the text field are strict, use CSS width / height attributes for precise control.

The only harvest is to know how each browser compatibility, and the final size of the calculation method, related factors, and so on, perhaps, for a future function to provide a different idea of the implementation!

En,that ' s all!

Study on the relationship between HTML textarea cols,rows attribute and width height