I'm wondering if there's any benefits to using <br> instead of css white-space:pre-wrap.
Most sites I've come across use <br> for line breaks on comment sections and other user written sections, instead of pre-wrap. Left wondering what benefits this has, as pre-wrap seems to be easier to implement, allows users to put their own line spacing, and so forth; which to me, would seem like a nicer user experience.
Only downside to this seems to be that very old browsers (IE 7-), which horrors seem to have been long forgotten as usage and support is now so low, don't fully support white-space.
Personally for me, the disadvantage of using white-space: pre-wrap would be not accounting for additional spaces/tabs, which HTML would count multiple spaces as a single space normally. This can be ugly sometimes, and also it gives the UI developer less control over how the comments section (for example) will look like, with variable user input.
See this Codepen for an example of how things might screw up, notice how spaces between words can appear at the start of new lines, as well as how a space can take up an entire line.
I personally just prefer to stick to the conventional <br /> way, since it allows me greater control for content to be displayed in expected ways.
I have a case where I list a few name/value pairs, separated with line breaks.
Seems I have these options:
a restyled pre (to show each name/value pair on a new line)
make sure the name/value pairs are not html and use
use white-space:pre-wrap
The least work in this situation is the css-option.
The reason why there are so many solutions with in the wild, I guess, is because there was a time when that did not exist, and it's easy to stick to a once invented wheel.
Related
I have seen   in html and can't quite tell what it does other than create some whitespace. I am wondering what exactly it does and when it should be used?
(it should have a semi-colon on the end) is an entity for a non-breaking space.
Use it between two words that should not have a line break inserted between them by word wrapping.
There is a good explanation about when this is appropriate grammar on the English StackExchange.
It is sometimes abused to create horizontal space between content in web pages (since it will not collapse like multiple regular spaces). Padding and margins should usually be used instead of this hack.
One reason for is to insert multiple spaces in a document.
In HTML, multiple whitespace characters are collapsed into one space. This includes tabs and newlines.
IF you wanted to display the following:
three spaces.
You could insert 3 entities instead of using spaces like so:
three spaces.
Edit: It's worth mentioning that is more of a historical artifact than anything else. Just about every use for it that is mentioned in the answers to this question has a better alternative means to accomplish that goal. However, is still with us, and these are some of the things people have used it for.
See also: http://www.sightspecific.com/~mosh/www_faq/nbsp.html
I don't know if this answers your question or not and certainly this answer is not of the caliber already provided by others, but the beauty of a discussion thread or Q&A site is the diversity of experience that might be found in it. So, on that note, I'll share with you what I've used nbsp; for. (To be perfectly honest, 24 hours ago, nbsp; was something I had never even heard of.)
Here's how I used nbsp;. I was posting something using markdown language and I had a very simple two-item bulleted list. For the life of me I could not get the spacing before this list and after to look symmetrical. So, I did a web search and somehow ended up taking a look at this thread.
Before using nbsp; the paragraph that followed bullet point #2 collapsed the spacing between the bulleted point and the text, making it look as if the paragraph had something to do with bullet #2, specifically (which was not the case). I tried a lot of different things that I can't even remember now, but the one thing that ultimately worked was insertion of nbsp;.
Since then, I've been seeing all sorts of posts that indicate some controversy over its use, but for non-coders who need to wrangle out of an unsightly/misleading formatting issue, nbsp; is a very quick and useful fix.
I've been writing a source-to-display converter for a small project. Basically, it takes an input and transforms the input into an output that is displayable by the browser (think Wikipedia-like).
The idea is there, but it isn't like the MediaWiki style, nor is like the MarkDown style. It has a few innovations by itself. For example, when the user types in a chain of spaces, I would presume he wants the spaces preserved. Since html ignores spaces by default, I was thinking of converting these chain of spaces into respective s (for example 3 spaces in a row converted to 1 )
So what happens is that I can foresee a possibility of a ton of tags per post (and a single page may have multiple posts).
I've been hearing alot of anti- s in the web, but most of it boils down to readability headaches (in this case, the input is supplied by the user. if he decides to make his post unreadable he can do so with any of the other formatting actions supplied) or maintenance headaches (which in this case is not, since it's a converted output).
I'm wondering what are the disadvantages of having tons of tags on a webpage?
You are rendering every space as ?
Besides wasting so much bandwidth, this will not allow dynamic line breaking as "nbsp" means "*n*on *b*reaking *sp*ace". This will most probably cause much trouble.
If it's just being dumped to a client, it's just a matter of size, and if it's gzipped, it barely matters in terms of network traffic.
It'll slow down rendering, I'm sure, and take up DOM space, but whether or not that matters depends on stuff I don't know about your use case(s). You might be able to achieve the same result in other ways, too; not sure.
s aren't tags, but are character entities like ©, <, >, etc.
I'd say that the disadvantages would be readability. When I see a word, I expect the spacing to be constant (unless it is in a block of justified text).
Can you show me a case where you'd need s?
Have you considered trying to figure out what the user, by inserting those spaces, is really trying to achieve? Rather than the how (they want to insert the spaces), the what (if the spaces are at the beginning of a line, they want to indent the text in question).
An example of this is many programming sites convert 4 spaces at the start of a line to a pre+code block.
For your purposes, maybe it should be a <block> block.
The end goal being that of converting the spaces not to what the user (with their limited resources) intended to show up there but, rather, what they meant to convey with it.
EDIT: Rephrased question.
Other than being bad practice, what other reasons are there against empty paragraphs in HTML?
ORIGINAL:
Background
Currently to add a nicely space paragraph in our CMS you press Enter key twice. I don't like empty paragraphs because they seem unnecessary to me. If you want a new paragraph, just press Enter and space it with CSS. If you want to write just below some text (e.g. to display code), then do a line break with Shift+Enter.
Question
Is there any very good reason in not allowing empty paragraphs? Is there a standard here? Seems like I just have a philosophical issue right now -- i.e. using empty paragraphs probably won't make page viewing faster or save that much space.
One thing I've learnt the heard way is that any time you have a WYSIWYG editor for a web page, you stand a risk of ending up with poor quality HTML.
It doesn't matter how good the editor is, or how well trained your people are to use it, you will end up with bad code.
They'll click the 'bold' button instead of selecting your sub-title class. They'll create spurious paragraph tags rather than line breaks. And I've had to explain to one person several times why it's a bad idea to use multiple spaces to indent stuff.
Even when people are very good at using the editor and understand the implications, you'll still get things like stray markup setting styles and then unsetting them without any content, because if you (for example) make a word bold and then delete it, it generally doesn't delete the bold tags, and no-one thinks to switch to the HTML view to check.
The basic problem is that when you make it easy to use like a word processor, people will treat it like a word processor, and the underlying code becomes completely irrelevant to them. Their job is to produce content that looks good, and as long as they can achieve that, they don't generally care for how the code looks.
The good thing is that there is a solution. In general, the people generating the content are the same people who care the most about SEO. If you emphasise that there might be SEO consequences to poor quality HTML, I find that they suddenly care a lot more about the code they're generating. They still don't generally have the skills to fix it when they've broken it, but it does seem to make people take more care to follow the rules.
To directly answer your question, I don't think it's a disaster to have empty paragraph tags like that. It's preferable not to though, and you need to consider how the content would look semantically to a search engine - it may cause the search engine to see the two paragraphs of content as being less connected to each other than they should be. This may affect how it weights the content of each paragraph when it comes to deciding its page rank. In truth, it's unlikely to be a huge difference; in fact, I'd say it's probably very tiny, but in a competitive world, it could be enough to push you down a few places. There are probably other more important SEO issues for you to deal with, but as they say, every little helps.
There are times when you have a CSS styling a particular element in your case a paragraph. IF you will use empty paragraph they will unneccesarily pick up that styling which might not be needed.
By styling paragraphs with CSS, you can change the way paragraphs are styled easily in future.
For example, you might want to style differently if the user is browsing on a mobile device, or you might just decide that you want to add more or less space between paragraphs (using attributes like margin-top and margin-bottom on the p tag I guess) because it just looks better that way. If the spacing is done with extra p tags it'd be a lot harder to change.
I expect that things like screen readers for the visually impaired would deal with CSS-styled paragraphs better than if the structure of the page is changed by adding empty paragraphs.
I'm writting a simple paragraph in both English and Japanese, using only HTML and CSS. The English text breaks lines normally (when a word doesn't fit on a line anymore, it's pushed to the next one).
With Japanese though, not a whole word is pushed to the next line, but part of it only. I've tried setting word-wrap to break-word and normal, but nothing changes (with the Japanese text).
How to I make whole words in Japanese jump to the next line like it happens in English?
English separates words with spaces, Japanese doesn't.
Whether characters in Japanese form a word or not depends on context. In many cases, looking for certain grammatical (Kana) particles could be used to separate words - but this wouldn't even be close to being reliable.
Essentially, you'd need a Japanese dictionary / understanding of the language to identify where the words start and end - a browser won't know how to do this.
Alternatively, if you know the start and end of the words, you could perhaps wrap each one in a span - then use CSS to ensure each span wraps to a new line as a whole when it doesn't fit.
Japanese has specific rules that are followed when breaking text. They are called 禁則処理 (kinsoku shori). Here is a link explaining the rules. The rules are mostly concerned with special characters. Have a look at any popular Japanese webpage and you will see that multi-character (kana and kanji) words are often split. I often see です split between lines.
Update:
I stumbled across this tool recently. I haven't tried it out yet, but the theory is solid. If someone is looking to improve the line breaks with Japanese text this could be a good solution.
I'm not an expert with Japanese specifically so it's hard for me to tell if things are wrapping correctly, but I just had to solve this problem myself and both word-break: keep-all and white-space: nowrap seemed to solve the issue for me, so those might be worth trying out.
Until the browsers are smart enough to do on-the-fly semantic analysis of the language, there are only a couple of options :
1/ Understand enough of the language to be able to group semantic elements in their own, unbreakable DOM elements. Something like (without the line breaks) :
<span class="el">私は</span>
<span class="el">キッチンで</span>
<span class="el">パンを</span>
<span class="el">食べました。</span>
Then in CSS, use something like .el { display: inline-block; }. You probably want to do this only on headings and important text pieces only, since it could impact accessibility (ie. how screen readers interpret the text). The other inconvenients are that 1/ you need to understand the text to know where to add the blocks, and 2/ this obviously only works for static text (and even in that case, it's still a manual, painstaking process).
2/ Use a tool that does the grouping for you. It could be something on the client side, like TinySegmenter (whitch does segment a bit too much for my taste IMHO), or on the server-side, with things like Budou that use Google Cloud Natural Language API and ML to analyze your sentences. The downsides (at least for Budou) is that 1/ you need Python (I think that I saw a Node.js port somewhere), and 2/ It's not free.
Hope this helps!
try setting the css property
line-break:strict;
Check it out here.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
What is the best way to present the additional spacing that should come between sentences (using [X]HTML+CSS)?
<p>Lorem ipsum. Dolor sit amet.</p>
^^ wider than word spacing
Since HTML and XML both require whitespace folding, the above two spaces must behave as a single space.
What options are there? There are a few obvious ones below, what others exist? (Anything in CSS3?) What drawbacks, if any, exist for the these, including across different browsers? (How do the non-breaking spaces below interact with line wrapping?)
..ipsum. Dolor..
..ipsum. Dolor..
..ipsum. Dolor..
There's a lot of FUD on the net which claims this was invented for typewriters, but you can see it in documents such as the U.S. Declaration of Independence. (And yes, I realize you shouldn't follow all the conventions from over two hundred years ago, the DoI is merely a handy example showing this predates typewriters and monospaced fonts.) Or a typographer claiming that the additional space is distracting—after changing the background color so the example cannot be anything else!
To put it bluntly, while I appreciate opinions and discussion on whether additional spacing should be used or not (which isn't programming related), that is not what I'm asking. Assume this a requirement, what is the best way to implement it?
You can use white-space: pre-wrap to preserve sequences of spaces, while still wrapping text:
<p style="white-space: pre-wrap;">Lorem ipsum. Dolor sit amet.</p>
This is not supported in IE until IE 8 in IE 8 mode, nor in Firefox until 3.0.
You could also use or for spaces one em or one en wide. I do not know how widespread support of these is, but they seem to work on the latest WebKit and Firefox on Mac OS X.
A sequence of two characters will prevent line breaks in that space; that's what means, non-breaking space. The sequence A sentence. Another. causes the to appear on the second line, indenting text slightly, which is probably undesireable. The sequence A sentence. Another. works fine, with line breaking and not adding any extra indentation, though if you use it in justified text, with the at the end of the line, it will prevent that line from being properly justified. is intended for the case of writing someone's name, like Mr. Torvalds, or an abbreviation ending with a ., in which typographical convention says that you shouldn't split it across lines in order to avoid people being confused and thinking the sentence has ended.
So, using sequences of is undesirable. Since this is a stylistic effect, I'd recommend using white-space: pre-wrap, and accepting that the style will be a bit less than ideal on platforms that don't support it.
edit: As pointed out in the comments, white-space: pre-wrap does not work with text-align: justify. However, I've tested out a sampler of different entities using BrowserShots (obnoxious ads, and somewhat flaky and slow, but it's a pretty useful service for the price, which is free). It looks like a pretty wide variety of browsers, on a pretty wide variety of platforms, support and , a few that don't still use spaces so the rendering isn't too bad, and only IE 6 on Windows 2000 actually renders them broken, as boxes. BrowserShots doesn't let me choose the exact browser/OS combos I want, so I can't choose IE 6 on XP to see if that's any different. So, that's a plausible answer as long as you can live with IE 6 on Win2K (and maybe XP) broken.
Another possible solution would be to find (or create) a font that has a kerning pair for the ". " combination of characters, to kern them more widely apart. With #font-face support in all of the major browsers at this point, including IE back to IE 5.5 (though IE uses a different format than the other browsers), using your own font is actually becoming reasonable, and falling back to the users default font if not supported would not break anything.
A final possibility might be to talk the CSS committee into adding a style feature that would allow you to specify that you want wider spacing at the end of sentences (which would be determined by a period followed by a space; acronyms and abbreviations would need an in order to avoid getting the wider space). The CSS committee is currently discussing adding more advanced typography support, so now might be a good time to start discussing such a feature.
For all you 'antiquated' and 'mono-space-only' naysayers - Read a book. Professional publishers have used a single between sentences for time immemorial, and THAT is where the monospace two-space standard came from. Learn from history instead of spouting rhetoric with no basis in fact. I have to admit, though, that an looks better in most browsers: is just too wide. What do you think of the readability of this paragraph? Stackoverflow's editor allows some HTML, and I'm using between all sentences.
Wrap each sentence in a span, and style the span perhaps. (Not a great solution).
isn't the correct character to use, semantically speaking. It's a non-breaking space: a space which won't be used as a line break. Perhaps use a space an a or a single , or (my personal recommendation) don't bother with the antiquated double-space style on your page.
Just wanted to throw out there that if your goal is to override the default browser whitespace implementation to provide "proper" sentence spacing, there is actually some debate as to what constitutes proper spacing. It seems that the double-space "standard" is most likely just a carryover from when typewriters used monospace fonts. Money quote:
The Bottomline: Professional
typesetters, designers, and desktop
publishers should use one space only.
Save the double spaces for
typewriting, email, term papers (if
prescribed by the style guide you are
using), or personal correspondence.
For everyone else, do whatever makes
you feel good.
Unless you have this as a strict requirement, it does not seem worth the effort to try and "fix." (I realize this is not an answer to your stated question per se, but wanted to make sure that you are aware of this info as it might influence your decision to spend a lot of time on it.)
is the worst possible method, as it disrupts justification. Pre-wrap as suggested gives coarse control but can't be justified. There are other space entities like &thinspace; and &nspace;, as well as a bunch of Unicode space characters that should give somewhat better control and should not break justification. These entities are the best non-CSS solution in my opinion.
For better control you need a CSS solution. You can either span the sentences, the obvious choice, or you can span the space between sentences. The latter to me seems more incorrect, but it is easier to achieve, especially if you have the common two-space typing habit - you can simply search and replace all period-space-space with a span around a space. I have some javascript that does this on the fly for blogger.
Don't use the box model (padding-right) as it will break the right margin of fully justified text (and even if not fully justified, causes lines to wrap "early"). If you are spanning the space between sentences you can just alter the word-spacing on these elements. If you are wrapping sentences, you can set your paragraph or other container to have bigger word-spacing, and the set the sentences back to normal, or you can do it in one step with the after selector:
.your_sentence_class:after { content:" "; word-spacing:0.5em; }