Warning: jsMath requires JavaScript to process the mathematics on this page.
If your browser supports JavaScript, be sure it is enabled.
View source

From QED

for Help:Boxed text
Jump to: navigation, search
You can view and copy the source of this page:
There are a variety of ways to enclose text in a box. A summary is shown in the table in the first section.

==Summary==
{| class=wikitable
|-
! Technique !!  Text wraps? || Comment || Example
|-
| [[#Indentation|Indentation]] ||  {{ no }} || ||
 Example
|-
| &lt;pre> || {{no}} || Use class=clear for transparency || <pre>Example</pre>
|-
| {{LinkToTemplate|align}} || {{ yes|wraps }} || || {{align|style=background-color:lightgreen|center|A centered div with background-color:lightgreen }}
|-
| {{LinkToTemplate|box}}  || {{yes|wraps}} || || {{box|Example}}
|-
| {{LinkToTemplate|boxed}} || {{yes|wraps}} || centered || {{boxed|Example}}
|-
| {{LinkToTemplate|co}}  || {{yes|wraps}} || || {{co|gold|cornflowerblue|Example}}
|-
| {{{LinkToTemplate|code}}  || {{yes|wraps; slider}} || || {{code|Example}}
|-
| {{LinkToTemplate|file}}  || {{yes|wraps; slider}} || || {{file|Example}}
|-
| {{LinkToTemplate|information}}  || {{yes|wraps}} || || {{information|Example}}
|-
| {{LinkToTemplate|pre}}  || {{yes|wraps}} || Same as {{((}}box{{))}} but uses tt tags || {{pre|Example}}
|-
| {{LinkToTemplate|quotation}}  || {{yes|wraps}} || See also [[Help:Quotations]] || {{quotation|Example}}
|-
| {{LinkToTemplate|textbox}}  || {{yes|wraps}} || || {{textbox|Header|Example}}
|-
| {{LinkToTemplate|warning}} || {{yes|wraps}} || || {{warning|Example}}
|-
|}

==Indentation==

The simplest way to format text so that it will appear in a box is to indent it with a space:

&nbsp;<nowiki>Indented text appears in a box.</nowiki><br/>
&nbsp;<nowiki>Unfortunately the text itself will not wrap to adjust to the size of the browser window.</nowiki>

produces:

 Indented text appears in a box. 
 Unfortunately the text itself will not wrap to adjust to the size of the browser window.

==The &lt;pre> tag==

Preformatted text is presented in a box, e.g.

&lt;pre>Preformatted text is presented in a box.&lt;/pre>

produces

<pre>Preformatted text is presented in a box.</pre>

Once again, as with indentation, the text itself will not wrap to adjust to the size of the browser window.

On {{qed}}, the CSS class named '''clear''' can be used in conjunction with the &lt;pre> tag to ensure transparency, e.g.

<pre>{{file|hello.php|&lt;pre class=clear>&lt;?php
echo "Hello, PHP\n";
?>
&lt;/pre>
}}
</pre>

produces:

{{file|hello.php|<pre class=clear><?php
echo "Hello, PHP\n";
?>
</pre>
}}

See [[MediaWiki:Common.css]] for the definition of the ''clear'' class.

==Templates==
Several templates are available for creating boxes around text. The following sections only provide simple examples. Please consult the template documentation for additional options.

===[[Template:align]]===
<nowiki>{{align|style=background-color:lightgreen|center|A centered div with background-color:lightgreen }}</nowiki> produces a box as follows: {{align|style=background-color:lightgreen|center|A centered div with background-color:lightgreen }}


===[[Template:co]]===
<nowiki>{{co|gold|cornflowerblue|Gold on blue}}</nowiki> produces a box without lines:

{{co|gold|cornflowerblue|Gold on blue}}


===[[Template:box]]===
<nowiki>
{{box
|This template provides an alternative to the &lt;pre> tag, which does not allow wrapping of long lines and for which the width attribute is deprecated. Contrast the behavior of this box with the syntax box above as you shrink the window width.
}}
</nowiki>

produces
{{box
|This template provides an alternative to the &lt;pre> tag, which does not allow wrapping of long lines and for which the width attribute is deprecated. Contrast the behavior of this box with the syntax box above as you shrink the window width.
}}


===[[Template:pre]]===
[[Template:pre]] is the same as [[Template:box]] but the text is embedded within HTML &lt;tt&gt; and &lt;/tt&gt; tags.

<nowiki>
{{pre
|This template provides an alternative to the &lt;pre> tag, which does not allow wrapping of long lines and for which the width attribute is deprecated. Contrast the behavior of this box with the syntax box above as you shrink the window width.
}}
</nowiki>

produces
{{pre
|This template provides an alternative to the &lt;pre> tag, which does not allow wrapping of long lines and for which the width attribute is deprecated. Contrast the behavior of this box with the syntax box above as you shrink the window width.
}}


===[[Template:boxed]]===
<nowiki>{{boxed|The "boxed" template.}}</nowiki>

produces {{boxed|The "boxed" template.}}


===[[Template:quotation]]===

{{quotation|[[Template:quotation]] produces a box like this. Once again, lines are wrapped depending on the size of the browser window.}}


===[[Template:textbox]]===

<nowiki><center>{{textbox|The "textbox" template|This is an example.}}</center></nowiki>

produces <center>{{textbox|The "textbox" template|This is an example.}}</center>


===[[Template:Code]]===
{{Code|This box uses the [[Template:code|code]] template. 

It is easy to embed newlines.}}


===[[Template:File]]===
{{File|warning.txt|This box uses the [[Template:file|file]] template and is a variant of [[Template:Code]].}}


===[[Template:Warning]]===
{{warning|This box uses the [[Template:Warning|warning]] template}}


===[[Template:2x2]]===
<pre>
{{2x2
|heading1=First Column
|heading2=Second Column
|cell11=Top left
|cell21=Left
|cell12=Right
|cell22=Bottom right
}}
</pre>

produces

{{2x2
|heading1=First Column
|heading2=Second Column
|cell11=Top left
|cell21=Left
|cell12=Right
|cell22=Bottom right
}}


==Notes==
# Most of the above templates are based on [[Help:Tables|wiki table syntax]]. 
# If none of the above templates meets your needs, feel free to create your own, e.g. by copying the source text of an existing template.
# Tables defined using [[Help:Tables|wiki table syntax]] can be embedded within templates, but <nowiki>{{!}}</nowiki> must be used instead of | and similarly for <nowiki>{{!!}}</nowiki> and <nowiki>{{!-}}</nowiki>. See [[Template:TwoColumns#Embedded Tables|Template:TwoColumns]] for an example.

==See also==
* [[Help:Line breaks]]
* [[Template:TwoColumns]]

<!-- keywords: boxes around use html table syntax create -->
Templates used on this page: