Template talk:Nowraplinks

From Wikipedia, the free encyclopedia

Contents

[edit] David testing nowraplinks

This section has been repeatedly edit by me for testing purposes and to reflect that the CSS code is now added to common.css so everyone can use it directly. --David Göthberg 15:05, 19 August 2007 (UTC)

This template stops word wraps inside links (links with blanks in) and only allows word wraps between the links and in normal text. This is useful for instance for long link lists. It works similar to {{nowrap}}, but the method here gives much shorter and easier to use code.

I have implemented this as {{nowraplinks}} and {{nowraplinks end}}. This functionality could also be included in templates such as {{navigation}}. The reason I use the {{nowraplinks end}} instead of using {{nowraplinks | The link list as parameter}} is that that would mean using a pipe "|" and that doesn't work inside other templates such as {{navigation}}.

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

.nowraplinks a { white-space: nowrap; }

and this code:

<span class="nowraplinks"> Link list </span>

The class "nowraplinks" that I use to stop word wrapping in the middle of the links is now declared in common.css so everyone can use it.

To view the source code of the examples below simply click the edit button on this page, not on the Espionage boxes. But click the "show" button on the Espionage boxes to see the link lists.

[edit] Example with {{nowraplinks}}

v • d • e
Espionage

[edit] Old {{nowrap}} causing lots of code

v • d • e
Espionage

[edit] Old normal wrapping

v • d • e
Espionage


[edit] Usage in tables

For tables the best option is to directly use the class="nowraplinks" instead of the template {{nowraplinks}}. This also works if you need to use several classes at the same time. Take a look at this table and its code:

Espionage

Agent handling · Black bag operation · Concealment device · Dead drop · False flag · Industrial espionage · Non-official cover · Official cover ·

Agent handling · Black bag operation · Concealment device · Dead drop · False flag · Industrial espionage · Non-official cover · Official cover

Agent handling · Black bag operation · Concealment device · Dead drop · False flag · Industrial espionage · Non-official cover · Official cover ·

Agent handling · Black bag operation · Concealment device · Dead drop · False flag · Industrial espionage · Non-official cover · Official cover

Nice, isn't it? I hope people like it. If any one know a better way to do this please tell. I have tested that this works well in IE 5.5, Opera 9.02 and Firefox 2.0.

--David Göthberg 17:27, 10 August 2007 (UTC)

[edit] Span vs. div

Have you tested using <div> instead of <span>? I'm not entirely sure, but it may correct some of the problems you've been having with more complicated wrapping cases. --Dinoguy1000 Talk 15:01, 22 August 2007 (UTC)

Oh, good idea. I'll test it right away. I did choose span since it allows nowraplinks to even be used on text that wraps around images etc. But I guess it will more or less never be used like that so using div is just as ok to use. --David Göthberg 17:07, 22 August 2007 (UTC)
Ok, I tested more. Same result no matter if I use span, div or a wiki table with the nowraplinks class. Firefox 2.0 keeps wrapping too late so things end up outside the box. And if we add some "(" and ")" around our links, like this (Salt), then both Firefox and IE goes really weird. Firefox then lets things end up way outside the box, and IE starts wrapping wildly between the links and the ")".
Have you seen the discussion we had about this at Template talk:Navbox generic#Class nowraplinks? As I mention there I have found a workaround that seems to work perfectly in all browsers we tested so far. I packaged that solution as {{nowrap begin}}. In many cases it is more complicated to use than nowraplinks, but for instance for dotted lists it is actually as easy to use. And for some complex lists like the one in {{USLegislatures}} it is the easiest solution to use we had so far.
--David Göthberg 17:33, 22 August 2007 (UTC)

[edit] Floating over the border problem

I have noticed that the really bad "floating over the right border problem in Firefox and Internet Explorer" occurs when link lists contain any of:

  • Parenthesis ( ).
  • Quotation marks " ".

So that is the situations when we need to use {{nowrap begin}} + {{·wrap}} + {{nowrap end}} since it solves that problem.

This only happens when a link list uses {{nowraplinks}} or its CSS class. But we use that CSS class in {{navbox}} thus this happens a lot. Note that not using {{nowraplinks}} would mean having to use {{nowrap begin}} + {{·wrap}} + {{nowrap end}} on all link lists which would be more work and more code.

--David Göthberg (talk) 06:32, 26 February 2008 (UTC)

I'm using IE7, and I have never seen this problem. Can you please provide an example of the error so I can see what you mean? --MrStalker (talk) 10:32, 26 February 2008 (UTC)

Well, we who know about the problem fix it on sight. So I don't know of any existing examples out there although I stumble on them pretty often. But here are some hand coded examples.

For Firefox the problem usually is that the text and links will flow over the right border of the box. For Internet Explorer the main problem is that it will do line breaks at the parenthesis or quotation marks even if there are no spaces next to those parenthesis or quotation marks.

Note! To see the problem you might have to drag the width of your web browser window so it becomes smaller and smaller.

1: Here is an example using the nowraplinks class:

(A lot of)(parenthesis) · (causes)(problems) · (in Firefox)(and) · (Internet)(Explorer.)

"A lot of""quotation marks" · "causes""problems" · "in Firefox""and" · "Internet""Explorer."

2: And here is the same example still surrounded by the nowraplinks class but now using the fix {{nowrap begin}} + {{·wrap}} + {{nowrap end}}. As far as we know this example should behave well in all web browsers and not flow out of the box and only line break after the dots.

(A lot of)(parenthesis) · (causes)(problems) · (in Firefox)(and) · (Internet)(Explorer.)

"A lot of""quotation marks" · "causes""problems" · "in Firefox""and" · "Internet""Explorer."

Remember, this might look different in different versions of Firefox and Internet Explorer. Not all users use the latest web browser version.

--David Göthberg (talk) 10:49, 26 February 2008 (UTC)

Well, at least in IE7 it looks exactly as it should. --MrStalker (talk) 12:32, 26 February 2008 (UTC)
Now I have investigated this problem further and documented it properly at the new how-to guide Wikipedia:Line break handling.
--David Göthberg (talk) 14:29, 12 March 2008 (UTC)

[edit] Nowrap how-to guide

I first rough version of Wikipedia:Line break handling is done. Its a how-to guide about how to handle word wraps (line breaks) at Wikipedia. Take a look and discuss it on its talk page.

--David Göthberg (talk) 21:38, 11 March 2008 (UTC)