I've got a textarea that is to hold a of a set maximum number of words. I need to size a responsive textarea to just comfortably hold that number of words. An example: the set maximum number of words is 50. So the box has to hold 50 words. I decided to use ch as the unit. I determine that 1 word for sizing purposes is 6 characters. So, the total number of characters is 300. I want width and height so I calc width = total chars * .75 = 225 and height = total chars * .25 = 75. So the size is "height:225ch; width:75ch;". The resulting box is ENORMOUS - can easily hold over 10 times the 50 words. It looks like the ch unit is worthless. How can I size a textarea accurately based on the number of words it needs to hold? https://codepen.io/SLSCoder/pen/jOjXzxW?editors=1010
Hi there SoftLink, your little problem does not need any JavaScript, just a lttle simple CSS. HTML <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>Made to measure textarea</title> <link rel="stylesheet" href="screen.css" media="screen"> </head> <body> <h1>Made to measure textarea</h1> <textarea id="monospace-words">OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO OOOOOO </textarea> </body> </html> Code (markup): screen.css body { background-color: #f9f9f9; background-image: linear-gradient( to bottom, #eee, #888 ); background-attachment: fixed; font: normal 1em / 1.5 arial, helvetica, sans-serif; } h1 { font-size: 1.25em; color: #555; text-align: center; } #monospace-words { display: block; width: 70ch; height: 10ch; padding: 1ch; margin: auto; border: 1px solid #000; box-shadow: 0.3em 0.3em 0.4em rgba( 0,0,0,0.5 ); background-color: #fff; overflow: hidden; resize: none; font-family: courier, monospace; /* change monospace family to suit */ font-size: 1em; } @media( max-width: 45em ){ #monospace-words{ width: 35ch; height: 20ch; } } @media( max-width: 24em ){ #monospace-words { width: 28ch; height: 26ch; } } Code (markup): The page is also fully responsive. Of course, this code is only tailored for six lettered words. For normal text it will not work with a textarea element and the p element would be recommended. coothead
denis bayly: Thanks for your response. My problem is that the required number of characters varies. It could be 5 to 3500 (a small article) characters. The number of characters is determined by a custom validation set by the app user: max-chars or max-words. This functionality is almost exclusively to determine the size of an input or textarea based on that validation. If the number of characters changes significantly your code no longer works. I had missed this in my meta tag: height=device-height, I added it. Thanks. I've got a couple of questions though: What is this: (font) 1em / 1.5 How did you come up with this: 70ch and this 35ch and this 28ch. It looks like you just played with it until the size was right. If so it doesn't say much for the ch unit. Using that technique you could just as easily use px and it would strictly be for static work. I created a huge table based on this: https://codepen.io/SLSCoder/details/WNqLyJY I'm using a javascript multidimensional associative array of that to determine the size of an input or textarea. I'd share it with you but digitalpoint won't let me attach a file that big (565k). Thanks again for your response.
You had 50 six letter words - (oooooo) in your example. I displayed them in the textarea element as 10 columns by 5 rows . Each column width is 7ch - (6 letters plus 1 space), so 7x10 =70 Each row height 2ch - (1 letter plus 1 space ), 2x5 = 10 The same logic was applied for the @media( max-width: 45em ) and @media( max-width: 24em ) coding which had (5 columns by 10 rows) and (4 columns by 13 rows). This gives... initial page width: 70ch; /*10x7*/ height: 10ch; /*2x5*/ Code (markup): max-width: 45em width: 35ch; /*5x7*/ height: 20ch; /*2x10*/ Code (markup): max-width: 24em width: 28ch; /*4x7*/ height: 26ch; /*2x13*/ Code (markup): I hope that this helps. coothead aka denis bayly