hint.css icon indicating copy to clipboard operation
hint.css copied to clipboard

Consider white-space : pre-line as a native part of hint--large

Open bjbarouch opened this issue 1 year ago • 2 comments

Thanks for your beautifully structured and commented scss.

On those rare occasions when I put more text in a hint than most people would consider doing, I want to be able to use newlines within the hint. Unsurprisingly, this always coincides with using hint--large. As such, after I load hint.css, I drop this in: .hint--large:after { white-space : pre-line; } In other hint--sizes, pre-line doesn't play well, but as best I can tell, in hint--large it has no impact on normal amounts of text (it's backward-compatible), and is helpful for the rare, long hint that benefits from being broken up by newlines. As a practical example, consider a frequently useful hint for password fields such as: At least one each of upper case, lower case, numeral, and other character. At least 12 characters long. It's not very long, but it's a bit bulky without the injected newline, and I think easier to read with the newline.

bjbarouch avatar Apr 14 '24 16:04 bjbarouch

@bjbarouch Thank you for your appreciation! Just to confirm, once you have white-space: pre-line in place, you add newlines through the &#10 entity, correct?

If this proposal goes forward, another decision point would be whether to go with white-space: pre or white-space: pre-line - depending on do we want whitespaces besides the newlines truncated or not.

chinchang avatar Apr 15 '24 04:04 chinchang

Using .hint--large:after { white-space : pre-line; } and then using "\n\n" in the content works well. In my case, I didn't want to preserve whitespace in general, just to have the ability to introduce a line or "paragraph" break. It would be great to also be able to use <i> and a few other HTML tags, but I don't think that's an option in any scenario based on :after or :before.

I had some trouble with the resulting layout with hint.css when trying it out on mobile -- it ran off the edge of the screen, so I looked around some more, and I've switched to using tippy. Being javascript-based, it has its own location intelligence and also offers embedded HTML and many other features. What you are doing in a css-only approach is awesome, but for my style of working, the greater functionality that comes from using js is a better fit.

I'd still encourage you to do this pre-line thing because it's easy, useful, and backward-compatible. Surely some hint.css users will consider it a nice to have.

bjbarouch avatar Apr 15 '24 13:04 bjbarouch