Heretic86 Posted August 15, 2021 Share Posted August 15, 2021 I have a Textarea that I want to behave like a Console / cmd.exe prompt. I have applied a cols and rows to control the size, and the following CSS rules: word-break: break-all; white-space: break-spaces; The use of width and height properties is also fine, but inconsistent across browsers on Textarea elements, much like <pre> elements work, but <pre> elements do not have additional characteristics that I need. Works exactly as I want in Firefox, but not in Chrome: Firefox (works like I want) Chrome (does NOT work like I want, notice that "foo" is word broken at 42 chars) In Chrome, the issue is that it breaks in the middle of the previous word at the same size, but adjusting that size a bit, the spaces are retained on the previous line and collapsed, which is NOT what I want. I want the space characters after the word is wrapped to the next line. I would like to do so without having to replace User Text with Javascript or additional elements. Each line must display all characters, especially spaces, uncollapsed Each line can not have any more than 43 characters so they should wrap to the next line uncollapsed Line Wraps should NOT occur in the middle of the previous word Line Wraps should NOT wrap spaces to the last line as it exceeds 43 characters Line Wraps should NOT collapse spaces In Chrome, the previous line is not wrapped in the correct location. The user should NOT have to hit ENTER, so it should automatically wrap the space to the next line, like a Console. How can I make my Textarea break at 43 characters and wrap \n Newlines and preserve Spaces to the next line in consistently? Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/ Share on other sites More sharing options...
requinix Posted August 15, 2021 Share Posted August 15, 2021 What's the rest of the CSS? Are you sizing it at 43ch wide? Given it a better line-height, like 2ex? Eliminated margins and paddings and borders (or changed sizing model) that will mess up width measurements? Because it sounds like your problem isn't so much where line breaks happen but how you're sizing the textarea. Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589142 Share on other sites More sharing options...
Heretic86 Posted August 15, 2021 Author Share Posted August 15, 2021 45 minutes ago, requinix said: What's the rest of the CSS? Are you sizing it at 43ch wide? Given it a better line-height, like 2ex? Eliminated margins and paddings and borders (or changed sizing model) that will mess up width measurements? Because it sounds like your problem isn't so much where line breaks happen but how you're sizing the textarea. Mostly the rest of the CSS is experimental, trying to figure out the combination of things that would give me the effect that I was looking for, so everything except the monospace font family can go if it gives the functionality I am looking for. So change from px fixed width to em? --- Oops: forgot to post link to Demo Page... https://www.webucate.me/textarea.htm Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589147 Share on other sites More sharing options...
requinix Posted August 15, 2021 Share Posted August 15, 2021 Looking closer at the specifications, they still allow the browser discretion on exactly where to cut. Everything talks about how to handle trailing line whitespace but not much on leading line whitespace. So far I can't see a way to do it with CSS. I would settle for the current behavior and just let it wrap even if not exactly at 43 characters every time. Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589150 Share on other sites More sharing options...
Barand Posted August 15, 2021 Share Posted August 15, 2021 This is the closest I could get <html> <head> <style type='text/css'> body { background-color: black; color: #80FF80; } textarea { font-family: monospace; font-size: 18pt; background-color: black; color: #80FF80; border: 1px solid gray; word-break: break-all; margin: 24px; } </style> </head> <body> <textarea cols='43' rows='10'></textarea> </body> </html> giving Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589152 Share on other sites More sharing options...
Heretic86 Posted August 16, 2021 Author Share Posted August 16, 2021 3 hours ago, Barand said: This is the closest I could get <html> <head> <style type='text/css'> body { background-color: black; color: #80FF80; } textarea { font-family: monospace; font-size: 18pt; background-color: black; color: #80FF80; border: 1px solid gray; word-break: break-all; margin: 24px; } </style> </head> <body> <textarea cols='43' rows='10'></textarea> </body> </html> giving Also very close. Only thing I see in your suggestion is "white-space: break-spaces;" is missing. From my tests it appears to be necessary. Did you get anything by removing that line? 3 hours ago, requinix said: Looking closer at the specifications, they still allow the browser discretion on exactly where to cut. Everything talks about how to handle trailing line whitespace but not much on leading line whitespace. So far I can't see a way to do it with CSS. I would settle for the current behavior and just let it wrap even if not exactly at 43 characters every time. I cant ignore the seemingly arbitrary 43 character limit. If it goes over the character limit, the end result is the words run off the area. Text the user enters in this example box is saved and displayed multiple times in other places. Its a hard limit from the way everything else has turned out so far. The CSS solution would be simple. Javascript solution is gonna be a nightmare. Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589155 Share on other sites More sharing options...
Barand Posted August 16, 2021 Share Posted August 16, 2021 6 hours ago, Heretic86 said: Did you get anything by removing that line? No, but nor could I see any difference by having it there. Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589159 Share on other sites More sharing options...
Heretic86 Posted August 16, 2021 Author Share Posted August 16, 2021 3 hours ago, Barand said: No, but nor could I see any difference by having it there. Try toggling it from the Elements Console in Firefox when you have content that word-wraps and you should see the difference. Toggling in Chrome didnt do anything for me either. Use this text: "foo foo foo foo foo foo foo foo foo foo foo foo" without the quotes... Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589162 Share on other sites More sharing options...
Barand Posted August 16, 2021 Share Posted August 16, 2021 37 minutes ago, Heretic86 said: Try toggling it from the Elements Console in Firefox Did as requested - no difference Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589164 Share on other sites More sharing options...
kicken Posted August 16, 2021 Share Posted August 16, 2021 14 hours ago, Heretic86 said: If it goes over the character limit, the end result is the words run off the area. So far, in my experimenting with it the character count ever exceeds 43 per line. In the instances where its different than Firefox it's only 42 characters in the line. It seems when character #44 is a space, chrome takes the last character from the previous line as well rather than just having the next line start with a space. Dunno if that's due to a bug or intended behavior but there's probably nothing you can do to fix it other than implementing your own wrapping mechanism. If it's important that every line have exactly 43 characters then might as well handle it yourself to be sure. Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589174 Share on other sites More sharing options...
thara Posted August 16, 2021 Share Posted August 16, 2021 You can also try CSS "rem" unit for font-size. According to the W3C spec the definition for one rem unit is: Quote Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value. This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px). Eg: .textNewLine { font-size: .735rem; width: 312px; max-width: 312px; font-family: "Lucida Console", "Courier New", monospace; resize: none; overflow: hidden; white-space: break-spaces; } Same result is giving on firefox as well as chrome. Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589175 Share on other sites More sharing options...
Heretic86 Posted August 16, 2021 Author Share Posted August 16, 2021 6 hours ago, kicken said: So far, in my experimenting with it the character count ever exceeds 43 per line. In the instances where its different than Firefox it's only 42 characters in the line. It seems when character #44 is a space, chrome takes the last character from the previous line as well rather than just having the next line start with a space. Dunno if that's due to a bug or intended behavior but there's probably nothing you can do to fix it other than implementing your own wrapping mechanism. If it's important that every line have exactly 43 characters then might as well handle it yourself to be sure. Exactly what Chrome is doing to me also. 5 hours ago, thara said: You can also try CSS "rem" unit for font-size. According to the W3C spec the definition for one rem unit is: This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px). Eg: .textNewLine { font-size: .735rem; width: 312px; max-width: 312px; font-family: "Lucida Console", "Courier New", monospace; resize: none; overflow: hidden; white-space: break-spaces; } Same result is giving on firefox as well as chrome. Trying that code, still having no effect. How about a Javascript solution? At least it would be consistent across browsers? Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589176 Share on other sites More sharing options...
Heretic86 Posted August 18, 2021 Author Share Posted August 18, 2021 I put together a small gif, the visual may explain better what Chrome is doing... Notice the 2nd row, how it goes back and forth between "o foo" and just "foo" as I use the Inspector to change the size. I need for that SPACE in front of "foo" to NOT COLLAPSE... How do I make that space NOT COLLAPSE? Quote Link to comment https://forums.phpfreaks.com/topic/313556-css-for-textarea-with-console-style-layout/#findComment-1589205 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.