Jump to content

CSS for Textarea With Console Style Layout


Heretic86

Recommended Posts

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)

textarea-firefox-wordwrap.png

Chrome (does NOT work like I want, notice that "foo" is word broken at 42 chars)

textarea-chrome-wordwrap.png

 

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

image.png.710c967895b5f8deb7c4f9d1a6c3e7ad.png

Link to comment
Share on other sites

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

image.png.710c967895b5f8deb7c4f9d1a6c3e7ad.png

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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...

chrome.gif

How do I make that space NOT COLLAPSE?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.