Template:Nowrap begin/doc: Difference between revisions

From FamilySearch Wiki
(Created page with '{{Documentation subpage}} <!-- PLEASE ADD CATEGORIES AND INTERWIKIS AT THE BOTTOM OF THIS PAGE --> This is the {{tl|nowrap begin}} template. This template prevents word wraps …')
 
m (remove { from templates)
Line 15: Line 15:
'''Note!''' These helper templates may only be used in sections surrounded by {{tl|nowrap begin}} and {{tl|nowrap end}} or they may cause weird behaviour of your page.
'''Note!''' These helper templates may only be used in sections surrounded by {{tl|nowrap begin}} and {{tl|nowrap end}} or they may cause weird behaviour of your page.


* {{tl|wrap}} - Marks where a wrap may occur.
* tl|wrap - Marks where a wrap may occur.
* {{tl|·wrap}} or {{tl|·w}} - Looks like this: " '''·''' ". For dotted lists. Renders a bold middot surrounded by spaces and then marks that a wrap may occur ''after'' the middot.
* tl|·wrap or tl|·w - Looks like this: " '''·''' ". For dotted lists. Renders a bold middot surrounded by spaces and then marks that a wrap may occur ''after'' the middot.
* {{tl|•wrap}} or {{tl|•w}} - Looks like this: " • ". For dotted lists that use small font and thus need a bigger dot. Renders a bullet surrounded by spaces and then marks that a wrap may occur ''after'' the bullet.
* tl|•wrap or tl|•w - Looks like this: " • ". For dotted lists that use small font and thus need a bigger dot. Renders a bullet surrounded by spaces and then marks that a wrap may occur ''after'' the bullet.
* {{tl|–wrap}} or {{tl|–w}} - Looks like this: " &ndash; ". For dashed lists. Renders a ndash surrounded by spaces and then marks that a wrap may occur ''after'' the ndash.
* tl|–wrap or tl|–w - Looks like this: " &ndash; ". For dashed lists. Renders a ndash surrounded by spaces and then marks that a wrap may occur ''after'' the ndash.
* {{tl|—wrap}} or {{tl|—w}} - Looks like this: " &mdash; ". Renders a mdash surrounded by spaces and then marks that a wrap may occur ''after'' the mdash.
* tl|—wrap or tl|—w - Looks like this: " &mdash; ". Renders a mdash surrounded by spaces and then marks that a wrap may occur ''after'' the mdash.
* {{tl|!wrap}} or {{tl|!w}} - Looks like this: " &#124; ". For pipe separated lists. Renders a pipe surrounded by spaces and then marks that a wrap may occur ''after'' the pipe. The pipe used is not a real pipe but the code <code>&amp;#124;</code> so should work within wiki tables etc.
* tl|!wrap or tl|!w - Looks like this: " &#124; ". For pipe separated lists. Renders a pipe surrounded by spaces and then marks that a wrap may occur ''after'' the pipe. The pipe used is not a real pipe but the code <code>&amp;#124;</code> so should work within wiki tables etc.
* {{tl|\wrap}} or {{tl|\w}} - Looks like this: " / ". For slash separated lists. Renders a slash surrounded by spaces and then marks that a wrap may occur ''after'' the slash. The "\" in the name leans the other way than the rendered slash "/" for wiki-technical reasons.
* tl|\wrap or tl|\w - Looks like this: " / ". For slash separated lists. Renders a slash surrounded by spaces and then marks that a wrap may occur ''after'' the slash. The "\" in the name leans the other way than the rendered slash "/" for wiki-technical reasons.


=== Usage ===
=== Usage ===
Line 28: Line 28:
{{nowrap begin}}
{{nowrap begin}}


[[Salt]] and{{wrap}} [[Pepper]] and{{wrap}} [[Curry]]  
[[Salt]] andwrap [[Pepper]] and wrap [[Curry]]  
and{{wrap}} [[Saffron]].{{wrap}}
and wrap}} [[Saffron]]. wrap  
[[Salt]] and{{wrap}} [[Pepper]] and{{wrap}} [[Curry]]  
[[Salt]] and wrap [[Pepper]] and wrap [[Curry]]  
and{{wrap}} [[Saffron]].  
and wrap [[Saffron]].  


{{nowrap end}}
{{nowrap end}}
Line 53: Line 53:
{{nowrap begin}}
{{nowrap begin}}


[[Salt]] and [[Pepper]]{{·wrap}}
[[Salt]] and [[Pepper]]·wrap
[[Pepper]] and [[Curry]]{{·wrap}}
[[Pepper]] and [[Curry]]·wrap  
[[Curry]] and [[Saffron]]{{·wrap}}
[[Curry]] and [[Saffron]]·wrap
[[Saffron]] and [[Salt]]
[[Saffron]] and [[Salt]]


Line 80: Line 80:
|
|
{{nowrap begin}}
{{nowrap begin}}
[[Salt]] and{{wrap}} [[Pepper]] and{{wrap}} [[Curry]]  
[[Salt]] and wrap [[Pepper]] and wrap [[Curry]]  
and{{wrap}} [[Saffron]].{{wrap}}
and wrap [[Saffron]]. wrap  
[[Salt]] and{{wrap}} [[Pepper]] and{{wrap}} [[Curry]]  
[[Salt]] and wrap [[Pepper]] and wrap [[Curry]]  
and{{wrap}} [[Saffron]].  
and wrap [[Saffron]].  
{{nowrap end}}
{{nowrap end}}
|
|
{{nowrap begin}}
{{nowrap begin}}
[[Salt]] and [[Pepper]]{{·wrap}}
[[Salt]] and [[Pepper]] ·wrap  
[[Pepper]] and [[Curry]]{{·wrap}}
[[Pepper]] and [[Curry]]·wrap  
[[Curry]] and [[Saffron]]{{·wrap}}
[[Curry]] and [[Saffron]]·wrap  
[[Saffron]] and [[Salt]]
[[Saffron]] and [[Salt]]
{{nowrap end}}
{{nowrap end}}
Line 100: Line 100:
|
|
{{nowrap begin}}
{{nowrap begin}}
[[Salt]]{{wrap}} [[Pepper]]{{wrap}} [[Curry]]{{·wrap}} [[Saffron]]{{·wrap}} [[Salt]]{{•wrap}} [[Pepper]]{{•wrap}} [[Curry]]{{–wrap}} [[Saffron]]{{–wrap}} [[Salt]]{{!wrap}} [[Pepper]]{{!wrap}} [[Curry]]{{\wrap}} [[Saffron]]{{\wrap}} [[Salt]]
[[Salt]] wrap [[Pepper]] wrap [[Curry]]·wrap [[Saffron]]·wrap [[Salt]]•wrap [[Pepper]]•wrap [[Curry]]–wrap [[Saffron]]–wrap [[Salt]]!wrap [[Pepper]]!wrap [[Curry]]\wrap [[Saffron]]\wrap [[Salt]]
{{nowrap end}}
{{nowrap end}}
|
|
{{nowrap begin}}
{{nowrap begin}}
[[Salt]]{{wrap}} [[Pepper]]{{wrap}} [[Curry]]{{·wrap}} [[Saffron]]{{·wrap}} [[Salt]]{{•wrap}} [[Pepper]]{{•wrap}} [[Curry]]{{–wrap}} [[Saffron]]{{–wrap}} [[Salt]]{{!wrap}} [[Pepper]]{{!wrap}} [[Curry]]{{\wrap}} [[Saffron]]{{\wrap}} [[Salt]]
[[Salt]]wrap [[Pepper]]wrap [[Curry]]·wrap [[Saffron]]·wrap [[Salt]]•wrap [[Pepper]]•wrap [[Curry]]–wrap [[Saffron]]–wrap [[Salt]]!wrap [[Pepper]]!wrap [[Curry]]\wrap [[Saffron]]\wrap [[Salt]]
{{nowrap end}}
{{nowrap end}}
|}
|}
Line 114: Line 114:
:<code><nowiki><span style="white-space:nowrap;"> Text and links </span> <span style="white-space:nowrap;"> More text and links </span></nowiki></code>
:<code><nowiki><span style="white-space:nowrap;"> Text and links </span> <span style="white-space:nowrap;"> More text and links </span></nowiki></code>


It means that wraps may only happen in the unprotected space between the <code><nowiki></span></nowiki></code> and the <code><nowiki><span ...></nowiki></code>. That's what {{tl|nowrap begin}} and its helper templates are packaging in an easy to use way.
It means that wraps may only happen in the unprotected space between the <code><nowiki></span></nowiki></code> and the <code><nowiki><span ...></nowiki></code>. That's what tl|nowrap begin and its helper templates are packaging in an easy to use way.


{{tl|·wrap}} and the other helper templates should not have any spaces or newlines before them or they will render two spaces before the dot. They tolerate anything from no to several spaces and even a newline after them and they will still only render one space after the dot. If a wrap occurs then the wrap will come after the dot, even if there are spaces before the helper template.
tl|·wrap and the other helper templates should not have any spaces or newlines before them or they will render two spaces before the dot. They tolerate anything from no to several spaces and even a newline after them and they will still only render one space after the dot. If a wrap occurs then the wrap will come after the dot, even if there are spaces before the helper template.


The {{tl|·wrap}} causes problems if inside sections of bolded and/or italicised text. Do end the bold text before the {{tl|·wrap}} and continue the bold text after it to avoid the problems. {{tl|•wrap}} and the other helper templates only have this problem if the section is bolded and italicised at the same time.
The tl|·wrap causes problems if inside sections of bolded and/or italicised text. Do end the bold text before the tl|·wrap and continue the bold text after it to avoid the problems. tl|•wrap and the other helper templates only have this problem if the section is bolded and italicised at the same time.


=== See also ===
=== See also ===
Line 126: Line 126:
* {{tl|nowraplinks}} - Prevents wraps inside links and only allows wraps between the links and in normal text. Very useful for link lists and usually easier to use than this template.
* {{tl|nowraplinks}} - Prevents wraps inside links and only allows wraps between the links and in normal text. Very useful for link lists and usually easier to use than this template.
* {{tl|do list}} - Uses this template (and associated templates) to build structured lists.
* {{tl|do list}} - Uses this template (and associated templates) to build structured lists.
* {{tn|·}} and {{tn|•}} - If you need dots/bullets when not using <code><nowiki>{{nowrap begin}}+{{nowrap end}}</nowiki></code>.
* tn|· and tn|• - If you need dots/bullets when not using <code><nowiki>{{nowrap begin}}+{{nowrap end}}</nowiki></code>.
* [[Wikipedia:Line break handling]] - The how-to guide detailing how to handle word wraps (line breaks) on Wikipedia.  
* [[Wikipedia:Line break handling]] - The how-to guide detailing how to handle word wraps (line breaks) on Wikipedia.  



Revision as of 11:17, 9 January 2019


This is the {{nowrap begin}} template.

This template prevents word wraps (line breaks) in text and links with spaces in. It is designed to handle the really tricky wrapping cases where you need full control. For instance in very complex long link lists. It works similarly to {{nowrap}} and {{nowraplinks}}.

This template takes no parameters, instead it works in pair with {{nowrap end}}.

Helper templates[edit source]

This template has a number of helper templates which allows you to tell the web browser exactly where line breaks may occur:

Note! These helper templates may only be used in sections surrounded by {{nowrap begin}} and {{nowrap end}} or they may cause weird behaviour of your page.

  • tl|wrap - Marks where a wrap may occur.
  • tl|·wrap or tl|·w - Looks like this: " · ". For dotted lists. Renders a bold middot surrounded by spaces and then marks that a wrap may occur after the middot.
  • tl|•wrap or tl|•w - Looks like this: " • ". For dotted lists that use small font and thus need a bigger dot. Renders a bullet surrounded by spaces and then marks that a wrap may occur after the bullet.
  • tl|–wrap or tl|–w - Looks like this: " – ". For dashed lists. Renders a ndash surrounded by spaces and then marks that a wrap may occur after the ndash.
  • tl|—wrap or tl|—w - Looks like this: " — ". Renders a mdash surrounded by spaces and then marks that a wrap may occur after the mdash.
  • tl|!wrap or tl|!w - Looks like this: " | ". For pipe separated lists. Renders a pipe surrounded by spaces and then marks that a wrap may occur after the pipe. The pipe used is not a real pipe but the code &#124; so should work within wiki tables etc.
  • tl|\wrap or tl|\w - Looks like this: " / ". For slash separated lists. Renders a slash surrounded by spaces and then marks that a wrap may occur after the slash. The "\" in the name leans the other way than the rendered slash "/" for wiki-technical reasons.

Usage[edit source]

{{nowrap begin}}

[[Salt]] andwrap [[Pepper]] and wrap [[Curry]] 
and wrap}} [[Saffron]]. wrap 
[[Salt]] and wrap [[Pepper]] and wrap [[Curry]] 
and wrap [[Saffron]]. 

{{nowrap end}}

It will render something like this:

Salt and Pepper and Curry and
Saffron. Salt and Pepper and
Curry and Saffron.

But it will not render like this:

Salt and Pepper and Curry
and Saffron. Salt and Pepper
and Curry and Saffron.

To make your code readable and easy to edit, you can put each wrappable "line" on its own line. And let's use some dots too. Like this:

{{nowrap begin}}

[[Salt]] and [[Pepper]]·wrap
[[Pepper]] and [[Curry]]·wrap 
[[Curry]] and [[Saffron]]·wrap
[[Saffron]] and [[Salt]]

{{nowrap end}}

It will render something like this:

Salt and Pepper · Pepper and Curry ·
Curry and Saffron · Saffron and Salt

But it will not render like this:

Salt and Pepper · Pepper
and Curry · Curry and Saffron
· Saffron and Salt

Examples[edit source]

Here are the above examples in actual running code in a table. Try dragging the width of your web browser window so it becomes smaller and smaller and watch how the line wrapping behaves:

Salt and wrap Pepper and wrap Curry and wrap Saffron. wrap Salt and wrap Pepper and wrap Curry and wrap Saffron.

Salt and Pepper ·wrap Pepper and Curry·wrap Curry and Saffron·wrap Saffron and Salt

An example demonstrating all the helper templates:

Salt wrap Pepper wrap Curry·wrap Saffron·wrap Salt•wrap Pepper•wrap Curry–wrap Saffron–wrap Salt!wrap Pepper!wrap Curry\wrap Saffron\wrap Salt

Saltwrap Pepperwrap Curry·wrap Saffron·wrap Salt•wrap Pepper•wrap Curry–wrap Saffron–wrap Salt!wrap Pepper!wrap Curry\wrap Saffron\wrap Salt

Technical details[edit source]

The actual code that does the job is this HTML+CSS code:

<span style="white-space:nowrap;"> Text and links </span> <span style="white-space:nowrap;"> More text and links </span>

It means that wraps may only happen in the unprotected space between the </span> and the <span ...>. That's what tl|nowrap begin and its helper templates are packaging in an easy to use way.

tl|·wrap and the other helper templates should not have any spaces or newlines before them or they will render two spaces before the dot. They tolerate anything from no to several spaces and even a newline after them and they will still only render one space after the dot. If a wrap occurs then the wrap will come after the dot, even if there are spaces before the helper template.

The tl|·wrap causes problems if inside sections of bolded and/or italicised text. Do end the bold text before the tl|·wrap and continue the bold text after it to avoid the problems. tl|•wrap and the other helper templates only have this problem if the section is bolded and italicised at the same time.

See also[edit source]

  • {{nowrap end}} - The other end of this template.
  • {{nowrap}} - A template with similar purpose.
  • {{nowraplinks}} - Prevents wraps inside links and only allows wraps between the links and in normal text. Very useful for link lists and usually easier to use than this template.
  • {{do list}} - Uses this template (and associated templates) to build structured lists.
  • tn|· and tn|• - If you need dots/bullets when not using {{nowrap begin}}+{{nowrap end}}.
  • Wikipedia:Line break handling - The how-to guide detailing how to handle word wraps (line breaks) on Wikipedia.