Jump to content

Wikipedia:HiddenStructure: Difference between revisions

From Wikipedia, the free encyclopedia
Content deleted Content added
restructure
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
By using [[Cascading Style Sheets]] (CSS) it is possible to suppress text in MediaWiki templates dependent upon the emptyness of a template parameter. This page documents a specific trick to achieve that.
By using [[Cascading Style Sheets]] (CSS), it is possible to suppress text in templates dependent upon the emptyness of a template parameter. This page documents a specific method to achieve that. This method was first popularized by [[User:Netoholic]] to help implement templates that are compliant with [[Wikipedia:Avoid using meta-templates]].


An example application of this method can be seen at [[Template:Infobox President]], where several rows are made "optional".
This trick was first presented and used by [[User:Netoholic]] to help implement templates that are compliant with [[WP:AUM]].


The intent of this method is to hide extraneous text only as a convenience and as a way to avoid over-use of so-called "conditional templates", like {{[[Template:Qif|Qif]]}}. This method does not work on many text-only browsers ([[Lynx (web browser)|Lynx]]) nor for users of many types of [[screen reader]] software. Therefore, it is important that the template be readable and make sense even if it weren't using this method. Some common pitfalls involve overuse of this by marking ''every'' row in an [[Wikipedia:Infobox templates|Infobox]] as optional, or using this method to hide punctuation around an optional parameter.
An example applications of this trick can be seen at [[Template:Infobox President]].

==Explanation==
Example 1:

<pre>
<span class{{{param1|}}}="hiddenStructure">param1: {{{param1|}}}</span>
</pre>

If param1 is empty (also if not defined), the above example results in nothing displayed.

If param1 is "BLA". The result is: "<code>param1: BLA</code>".

This trick relies on the existence of a CSS class "hiddenStructure". For the en: wiki this is defined in [[MediaWiki:Common.css]] as (revision as of 20:50, January 17, 2006):


== How it works ==
This method relies on the existence of a CSS class "hiddenStructure". For the en: wiki this is defined in [[MediaWiki:Common.css]] as (revision as of 20:50, January 17, 2006):
<pre>
<pre>
/* hiddenStructure from Monobook - allows selective hiding of markup in templates */
/* hiddenStructure from Monobook - allows selective hiding of markup in templates */
Line 25: Line 14:
}
}
</pre>
</pre>
Any text that is contained within the html construct <code><nowiki><div class="hiddenStructure">text to hide</div></nowiki></code> is hidden. The class can also be applied to <nowiki><span></nowiki> and wikitable rows ('''|-''').


== Examples ==
Any html code that is contained within the html construct <code><nowiki><span class="hiddenStructure">text to hide</span></nowiki></code> is hidden. Note that this hiding happens on the client side and requires a browser to understand CSS, which most modern browsers do. Non-CSS capable textbrowsers like lynx are not able to suppress that text, which more or less looks ugly on these (See [http://www.simnet.is/velfag/tmp/lynx.png example] for an older variant of the CSS trick viewed on lynx, provided by [[User:Ævar Arnfjörð Bjarmason]] on [[Template talk:Taxobox]]).


=== Example 1 ===
In the example 1, if param1 is empty, the template is expanded by the MediaWiki software as:
<pre>
<div class{{{param1|}}}="hiddenStructure">param1: {{{param1|}}}</div>
</pre>


If param1 is empty (also if not defined), the result in hidden on the client side.
<pre>
<pre>
<span class="hiddenStructure">param1: </span>
<div class="hiddenStructure">param1: </div>
</pre>
</pre>


If param1 is defined as "FOO", the param1 contents are internally [[concatenate]]d onto the class element.
Which is then hided on the client side by the browser due to the CSS class definition of "hiddenStructure" in Common.css (see above).

If param1 contains "BLA", example 1 is expanded as:

<pre>
<pre>
<span classBLA="hiddenStructure">param1: BLA</span>
<div classFOO="hiddenStructure">param1: FOO</div>
</pre>
</pre>


'classBLA="hiddenStructure"' is removed because [[HTML Tidy]] strips out invalid HTML tag attributes ("classBLA" is not a valid tag attribute) [http://en.wikipedia.org/w/index.php?title=User_talk:Adrian_Buehlmann&oldid=35621107#pipes]. [[HTML Tidy]] leaves:
'<code>classBLA="hiddenStructure"</code>' is removed by [[HTML Tidy]], which runs on Wikipedia and strips out invalid HTML tag attributes ("classBLA" is not a valid tag attribute). The final result sent to the client is:

<pre>
<pre>
<span>param1: BLA</span>
<div>param1: BLA</div>
</pre>
</pre>


== See also ==
Which displays as "param1: BLA".
* [[Template:Infobox]] - a "model" infobox template which demonstrates this method.

Revision as of 18:48, 24 January 2006

By using Cascading Style Sheets (CSS), it is possible to suppress text in templates dependent upon the emptyness of a template parameter. This page documents a specific method to achieve that. This method was first popularized by User:Netoholic to help implement templates that are compliant with Wikipedia:Avoid using meta-templates.

An example application of this method can be seen at Template:Infobox President, where several rows are made "optional".

The intent of this method is to hide extraneous text only as a convenience and as a way to avoid over-use of so-called "conditional templates", like {{Qif}}. This method does not work on many text-only browsers (Lynx) nor for users of many types of screen reader software. Therefore, it is important that the template be readable and make sense even if it weren't using this method. Some common pitfalls involve overuse of this by marking every row in an Infobox as optional, or using this method to hide punctuation around an optional parameter.

How it works

This method relies on the existence of a CSS class "hiddenStructure". For the en: wiki this is defined in MediaWiki:Common.css as (revision as of 20:50, January 17, 2006):

/* hiddenStructure from Monobook - allows selective hiding of markup in templates */
.hiddenStructure {
   display: none;
   speak: none;
}

Any text that is contained within the html construct <div class="hiddenStructure">text to hide</div> is hidden. The class can also be applied to <span> and wikitable rows (|-).

Examples

Example 1

<div class{{{param1|}}}="hiddenStructure">param1: {{{param1|}}}</div>

If param1 is empty (also if not defined), the result in hidden on the client side.

<div class="hiddenStructure">param1: </div>

If param1 is defined as "FOO", the param1 contents are internally concatenated onto the class element.

<div classFOO="hiddenStructure">param1: FOO</div>

'classBLA="hiddenStructure"' is removed by HTML Tidy, which runs on Wikipedia and strips out invalid HTML tag attributes ("classBLA" is not a valid tag attribute). The final result sent to the client is:

<div>param1: BLA</div>

See also