Jump to content

Help:Line-break handling: Difference between revisions

From Wikipedia, the free encyclopedia
Content deleted Content added
Undid revision 576556182 by 93.87.17.146 (talk) rv test
clarified use of <br/> - you can change it to say <br /> instead if you really feel like it, but I think <br/> is a bit easier and it's still perfectly valid
Line 26: Line 26:
}}
}}


=== &lt;br> ===
=== &lt;br/> ===
{{anchor|br}}
{{anchor|br}}


The {{tag|br|o}} (or {{tag|br|s}}) tag is used for a single forced line break. This can for instance be useful in a parameter of an infobox [[Wikipedia:Template namespace|template]], since tighter line spacing than paragraph breaks are often preferred inside boxes.
The {{tag|br/|o}} or {{tag|br|s}} tag is used for a single forced line break. This can for instance be useful in a parameter of an infobox [[Wikipedia:Template namespace|template]], since tighter line spacing than paragraph breaks are often preferred inside boxes.


{{markup
{{markup
|<nowiki>And this line of text<br />will break in the middle.</nowiki>
|<nowiki>And this line of text<br/>will break in the middle.</nowiki>
|And this line of text<br />will break in the middle.
|And this line of text<br/>will break in the middle.
}}
}}


Wikipedia currently renders HTML5 where {{tag|br|o}} and {{tag|br|s}} are both valid. Normally [[HTML Tidy]] will convert a variety of versions of the break tag to {{tag|br|s}} including {{tag|br|o}}, {{tag|br|c}}, {{tag|br/|o}} and {{tag|br.|o}}. This conversion does not work in a number of MediaWiki interface pages and can cause invalid HTML and problems rendering the page. Other wikis may not have HTML Tidy enabled, thus exported pages using an incorrect break tags will result in invalid HTML.
On most wiki pages, [[HTML Tidy]] automatically converts {{tag|br|o}}, {{tag|br|c}}, {{tag|br/|o}}, and others to {{tag|br|s}}. However, this conversion does not work in a number of pages in the MediaWiki namespace and sloppiness can cause invalid HTML and problems rendering the page. Other wikis may not have HTML Tidy enabled, thus exported pages using an incorrect break tags will result in invalid HTML.


=== &lt;poem><span id="poem"></span> ===
=== &lt;poem><span id="poem"></span> ===
Line 174: Line 174:
:< 3
:< 3


=== &lt;wbr> ===
=== &lt;wbr/> ===
{{anchor|wbr}}
{{anchor|wbr}}


{{tag|wbr|o}} is a word break opportunity; that is, it specifies where it would be OK to add a line-break where a word is too long, or it is perceived that the browser will break a line at the wrong place.
{{tag|wbr/|o}} is a word break opportunity; that is, it specifies where it would be OK to add a line-break where a word is too long, or it is perceived that the browser will break a line at the wrong place.


{{markup
{{markup
Line 183: Line 183:
|Now is the time to become a power editor, by learning HyperText Markup Language
|Now is the time to become a power editor, by learning HyperText Markup Language


|<nowiki>Now is the time to become a power editor, by learning Hyper<wbr>Text Markup Language</nowiki>
|<nowiki>Now is the time to become a power editor, by learning Hyper<wbr/>Text Markup Language</nowiki>
|Now is the time to become a power editor, by learning Hyper<wbr>Text Markup Language
|Now is the time to become a power editor, by learning Hyper<wbr/>Text Markup Language
}}
}}


As the browser window is adjusted narrower, the second example wraps between ''Hyper'' and ''Text''.
As the browser window is adjusted narrower, the second example wraps between ''Hyper'' and ''Text''.


{{tag|wbr|o}} does not work inside {{tl|nowrap}}.
{{tag|wbr/|o}} does not work inside {{tl|nowrap}}.


=== Wrap between (linked) list items ===
=== Wrap between (linked) list items ===

Revision as of 17:38, 26 October 2013

This page explains different methods for creating, controlling and preventing line breaks and word wraps in Wikipedia articles and pages.

When a paragraph or line of text is too long to fit on one line, web browsers, like many other programs, automatically wrap the text to the next line. Web browsers usually insert the word wraps where there are spaces in the text.

Causing line breaks

There are several ways to force line breaks and paragraph breaks in the text. The simplest method is by inserting newlines; for example:

Markup Renders as
A single newline in the markup does not cause a visible line break.
The paragraph is word wrapped where necessary.

An empty line in the markup causes a paragraph break.

And two empty lines in the markup cause an extra wide paragraph break.

A single newline in the markup does not cause a visible line break. The paragraph is word wrapped where necessary.

An empty line in the markup causes a paragraph break.

And two empty lines in the markup cause an extra wide paragraph break.

<br/>

The <br/> or <br /> tag is used for a single forced line break. This can for instance be useful in a parameter of an infobox template, since tighter line spacing than paragraph breaks are often preferred inside boxes.

Markup Renders as
And this line of text<br/>will break in the middle.

And this line of text
will break in the middle.

On most wiki pages, HTML Tidy automatically converts <br>, </br>, <br/>, and others to <br />. However, this conversion does not work in a number of pages in the MediaWiki namespace and sloppiness can cause invalid HTML and problems rendering the page. Other wikis may not have HTML Tidy enabled, thus exported pages using an incorrect break tags will result in invalid HTML.

<poem>

The <poem> extension adds HTML-like tags to maintain newlines and spaces. This is useful for longer blocks of text such as poems, lyrics, mottoes, oaths and the like. These tags may be used inside other tags such as <blockquote>. For example:

Markup Renders as
<poem>
In Xanadu did Kubla Khan
  A stately pleasure-dome decree:
Where Alph, the sacred river, ran
  Through caverns measureless to man
Down to a sunless sea.

So twice five miles of fertile ground
  With walls and towers were girdled round:
And there were gardens bright with sinuous rills,
  Where blossomed many an incense-bearing tree;
And here were forests ancient as the hills,
  Enfolding sunny spots of greenery.
</poem>

In Xanadu did Kubla Khan
  A stately pleasure-dome decree:
Where Alph, the sacred river, ran
  Through caverns measureless to man
Down to a sunless sea.

So twice five miles of fertile ground
  With walls and towers were girdled round:
And there were gardens bright with sinuous rills,
  Where blossomed many an incense-bearing tree;
And here were forests ancient as the hills,
  Enfolding sunny spots of greenery.

Lists

Numbered and bulleted lists are created using standard wikimarkup. In cases where a plain list without number or markup is desired, such as in an infobox, many editors will simply create a list using breaks. This method does not apply the semantics of a list, and for those using screen readers it will not sound like a list. For these cases, {{plainlist}} and both use list markup without numbers or bullets:

Markup Renders as
{{plainlist|
* cat
* dog
* horse
* cow
* sheep
* pig
}}
  • cat
  • dog
  • horse
  • cow
  • sheep
  • pig

Preventing and controlling word wraps

There are several ways to prevent word wraps (line wraps) from occurring in unwanted places. This is an overview of when to use which method.

&nbsp;

The HTML entity &nbsp; is a non-breaking, or hard, space. It renders like a normal space " ", but prevents a line wrap from occurring, like this:

Markup Renders as
Lots of text 10&nbsp;kg more text.

It may render like this:

Lots of text
10 kg more text.

But it will not render like this:

Lots of text 10
kg more text.

The nonbreaking space works within links exactly like a regular space. Thus you can link to [[J.&nbsp;R.&nbsp;R. Tolkien]] directly and it will render as J. R. R. Tolkien. The initials will not be separated across a line break.

&#8209;

Similarly, words or phrases containing hyphens normally line wrap where necessary. A non-breaking hyphen may be used to prevent this occurring, as in:

As seen in section 1&#8209;2 of the paper.

Thus, line wrapping that breaks the section identifier 1‑2 is prevented.

{{nowrap}}

The {{nowrap}} template prevents line wraps in text and links containing spaces. Consider a more complex case like "10 kg (22 lb)". It can be coded like this:

Lots of text 10&nbsp;kg&nbsp;(22&nbsp;lb) more text.

But that is slightly awkward. So in such cases it is instead recommended to use the {{nowrap}} template. Like this:

Lots of text {{nowrap|10 kg (22 lb)}} more text.

It may render like this:

Lots of text 10 kg (22 lb)
more text.

Or like this:

Lots of text
10 kg (22 lb) more text.

But it will not render like this:

Lots of text 10 kg (22
lb) more text.

In some cases {{nowrap}} doesn't work so well. For instance, when you want to prevent wraps in longer or more complex text, then it might be hard to see where the {{nowrap}} ends. Additionally, the MediaWiki template mechanisms interpret characters such as equal signs "=" and pipes "|" in template parameters as special characters, and thus they cause problems. In these cases, it is instead recommended to use {{nowrap begin}} + {{nowrap end}}, like this:

{{nowrap begin}}2 + 2 = 4{{nowrap end}} and
{{nowrap begin}}|2| < 3{{nowrap end}}

It may render like this:

2 + 2 = 4 and
|2| < 3

But it will not render like this:

2 + 2 = 4 and |2|
< 3

<wbr/>

<wbr/> is a word break opportunity; that is, it specifies where it would be OK to add a line-break where a word is too long, or it is perceived that the browser will break a line at the wrong place.

Markup Renders as
Now is the time to become a power editor, by learning HyperText Markup Language

Now is the time to become a power editor, by learning HyperText Markup Language

Now is the time to become a power editor, by learning Hyper<wbr/>Text Markup Language

Now is the time to become a power editor, by learning HyperText Markup Language

As the browser window is adjusted narrower, the second example wraps between Hyper and Text.

<wbr/> does not work inside {{nowrap}}.

Wrap between (linked) list items

In lists of links such as inside infoboxes and navboxes, use the CSS class hlist to format lists.

For occasional cases where you need to delineate two pieces of text outside of a list, you can use the templates {{·}} or {{•}} which contain a &nbsp; before the dot, thus handling some of the wrapping problems.

See also