You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
@bjbarouch Thank you for your appreciation!
Just to confirm, once you have white-space: pre-line in place, you add newlines through the 
 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.
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.
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.
The text was updated successfully, but these errors were encountered: