Help:Detailed formatting tips

From SourceWatch
Jump to navigation Jump to search
SourceWatch Help

Start here:

Advanced tools:

More info:

Other help:


This page provides detailed wiki formatting tips.

In the left column of the table below, you can see what effects are possible. In the right column, you can see how those effects were achieved. In other words, to make text look like it looks in the left column, type it in the format you see in the right column. (You may want to keep this page open in a separate browser window for reference. If you want to try out things without danger of doing any harm, you can do so in the Sandbox.)

Sections, Paragraphs, Lists and Lines

What it looks like What you type

Start your sections with header lines:

New Section

Subsection

Sub-subsection


== New Section ==

=== Subsection ===

==== Sub-subsection ====

A single newline has no effect.

But an empty line

starts a new paragraph.

A single newline
has no effect.

But an empty line

starts a new paragraph.
You can break lines
without starting a new paragraph.
You can break lines<br>
without starting a new paragraph.
  • Lists are easy to do:
    • start every line with a star
    • more stars means deeper levels
* Lists are easy to do:
** start every line with a star
** more stars means deeper levels
  1. Numbered lists are also good
    1. Very organized
    2. easy to follow
# Numbered lists are also good
## Very organized
## easy to follow
  • You can even do mixed lists
    1. and nest them
      • like this
* You can even do mixed lists
*# and nest them
*#* like this
Definition list 
list of definitions
item 
the item's definition
; Definition lists : list 
of definitions
; item : the item's definition
Lines can be
indented
several levels
:Lines can be
::indented
:::several levels
A colon will indent a line or paragraph.

A manual newline starts a new paragraph.

:A colon will indent a line or paragraph.
A manual newline starts a new paragraph.
IF a line starts with a space THEN
  it will be formatted exactly 
    as typed;
  in a technical looking font;
  lines won't wrap;
ENDIF
this is useful for:
  * pasting preformatted text;
  * algorithm descriptions;
  * ascii art;

WARNING If you make it wide,
you force the whole page to be wide and
hence less readable.
 IF a line starts with a space THEN
   it will be formatted exactly 
     as typed;
   in a technical looking font;
   lines won't wrap;
 ENDIF
 this is useful for:
   * pasting preformatted text;
   * algorithm descriptions;
   * ascii art;
Centered text.
<center>Centered text.</center>
A horizontal dividing line: above

and below.

A horizontal dividing line: above
----
and below. 

Using columns is an efficient use of space. Just put everything you want in columns below a "<div>" tag

  • One
  • Two
  • Three
  • Four
  • Five
  • Six

And make sure to close your columned-section with a "</div>". You can use this for bulleted or numbered lists or just lines of text, too.

<div style="-moz-column-count:2; column-count:2;">
* One
* Two
* Three
* Four
* Five
* Six
</div>
When adding a comment to a Talk page, you should sign it. You can do this by adding three tildes for your user name:

- Sheldon Rampton or four for user name plus date/time:

- Sheldon Rampton 08:10 Oct 5, 2002 (UTC)
When adding a comment to a Talk page,
you should sign it. You can do this by adding three
tildes for your user name: 
~~~
or four for user name plus date/time:
~~~~

Links and URLs

What it is What you put in What you get

Internal links

A simple internal link.
(Note that you may leave the first letter un-capitalized if it is more convenient for your writing - the wiki automatically capitalizes it for you when you click through the link.)
Link to [[public relations]]. Link to public relations.
An internal link with the same target but a different name. [[Public relations|P.R.]] P.R.
Simple endings to internal links are automatically blended into the link. [[Spin]]ing and [[conservative]]s Fearing and conservatives
The "pipe trick" automatically hides stuff in parentheses and namespaces or both. The server fills in the part after the | when you click "Save page." [[Tom Campbell (California politician)|]]
[[Help:Quick guide to editing|]]
[[Portal:Telecom, Media and Intellectual Property Policy (U.S.)|]]
Tom Campbell
Quick guide to editing
Telecom, Media and Intellectual Property Policy
Links to specific sections on a page. Sometimes you want to link to a specific section on a page. You do this by putting a "#" sign between the article title and the name of the section. For example, instead of linking to the main article on [[Ralph Regula]], you want to link to the section on the [[Ralph Regula#2006 elections]]. You can even use the pipe trick to clean it up or otherwise display something different in the link, [[Ralph Regula#2006 elections|like this]]. For example, instead of linking to the main article on Ralph Regula, you want to link to the section on the Ralph Regula#2006 elections. You can even use the pipe trick to clean it up or otherwise display something different in the link, like this.
Links to pages that don't exist yet show up in red.
  • You can create it by clicking on the link.
  • To create a new page from scratch:
    1. Create a link to it on some other page.
    2. Save that page.
    3. Click on the link you just made. The new page will open for editing.
  • See the instructions and guidelines on how to start a new page and make sure to check the naming conventions.
  • After creating a page, search for its title and make sure that everyone correctly links to it.
[[National sarcasm society]] is a page that doesn't exist yet. National sarcasm society is a page that doesn't exist yet.
You can redirect one article title to another by inserting this single line into the blank page you want to redirect from (the link goes where you want it to redirect to). This is useful for making sure that when other editors link to an article without checking the exact spelling, their link will still work. #REDIRECT [[Thomas D. Delay]] (See an example here)

External links

A simple external link is made by putting a url (including the http://) within a single bracket. To name the link, put one space after the url and then type whatever you want (spaces and other characters are generally fine) and close it with a bracket. [http://www.prwatch.org PR Watch] PR Watch
An even simpler external link can be made by simply pasting the url into the editing window. http://www.prwatch.org http://www.prwatch.org

Images

What it looks like What you put in
A picture: Experts small.gif


  • Only images that have been uploaded to SourceWatch can be used. To upload images, use the upload page. You can find the uploaded image on the image list.
A picture: [[Image:Experts_small.gif]]

or, with alternate text (preferred)

[[Image:Experts_small.gif|Trust Us, We're Experts book cover]] 

which will be

  • displayed in text only browsers, like Lynx
  • displayed in any browser, when display of images is disabled by the user
  • spoken in text to speech browsers, e.g. for blind people

Clicking on an uploaded image displays a description page, which you can also link directly to: Image:Experts_small.gif



[[:Image:Experts_small.gif]]

To include links to non-image uploads such as sounds, or to images shown as links instead of drawn on the page, use a "media" link.


Movie

Link to image



[[media:Foolbush.mov|Movie]]

[[media:Experts_small.gif|Link to image]]

To link to a section on the same page, use a "#" sign and then paste in the title of the section you want to link to. WARNING: If someone changes the name of a section heading, the link will break, so use this sparingly.

 [[#Articles and resources]] 

Videos

YouTube videos can be added to SourceWatch articles using {{#ev:service|id|dimensions|alignment|description|container}} tags,

Video from YouTube can be shown on any SourceWatch page using simple code. The video is not uploaded to SourceWatch, but embedded, meaning it is stored on YouTube, then called from there to be viewed on SourceWatch.

To add a YouTube video, you need the id code for the video. The easiest way to find this is to look at the URL of the You Tube page for the video. The string of letters and numbers after "v=" in the URL is the id code. So for the URL: http://www.youtube.com/watch?v=CCz1kmfqL7g the id code would be CCz1kmfqL7g.

YouTube videos are embedded with the code:

#ev:service|id|dimensions|alignment|description|container

The above YouTube video code would look like this:

{{#ev:youtube|CCz1kmfqL7g|200|right|The Lion Sleeps Tonight|frame}}

Character formatting

What it looks like What you type

Emphasize, strongly, very strongly.

  • These are double and triple apostrophes, not double quotes.
''Emphasize'', '''strongly''', 
'''''very strongly'''''.

You can also write italic and bold if the desired effect is a specific font style rather than emphasis, as in mathematical formulas:

F = ma
  • However, the difference between these two methods is not very important, and most people choose to ignore it.
You can also write <i>italic</i> and <b>bold</b>
if the desired effect is a specific font style
rather than emphasis, as in mathematical formulas:

:<b>F</b> = <i>m</i><b>a</b>
A typewriter font for technical terms.
A typewriter font for <tt>technical terms</tt>.
You can strike out deleted material

and underline new material.

  • Useful for editing.
You can <strike>strike out deleted material</strike>
and <u>underline new material</u>.

Umlauts and accents: (See wikipedia:Special characters)
À Á Â Ã Ä Å
Æ Ç È É Ê Ë
Ì Í Î Ï Ñ Ò
Ó Ô Õ Ö Ø Ù
Ú Û Ü ß à á
â ã ä å æ ç
è é ê ë ì í
î ï ñ ò ó ô
õ ö ø ù ú û

ü ÿ


&Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; 
&AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; 
&Igrave; &Iacute; &Icirc; &Iuml; &Ntilde; &Ograve; 
&Oacute; &Ocirc; &Otilde; &Ouml; &Oslash; &Ugrave; 
&Uacute; &Ucirc; &Uuml; &szlig; &agrave; &aacute; 
&acirc; &atilde; &auml; &aring; &aelig; &ccedil; 
&egrave; &eacute; &ecirc; &euml; &igrave; &iacute;
&icirc; &iuml; &ntilde; &ograve; &oacute; &ocirc; 
&otilde; &ouml; &oslash; &ugrave; &uacute; &ucirc; 
&uuml; &yuml;

Punctuation:
¿ ¡ « » § ¶
† ‡ • —


&iquest; &iexcl; &laquo; &raquo; &sect; &para;
&dagger; &Dagger; &bull; &mdash;

Commercial symbols:
™ © ® ¢ € ¥

£ ¤

&trade; &copy; &reg; &cent; &euro; &yen; 
&pound; &curren;
Subscript: x2

Superscript: x2 or x²

  • The latter method of superscript can't be used in the most general context, but is preferred when possible (as with units of measurement) because most browsers have an easier time formatting lines with it.

ε0 = 8.85 × 10−12

C² / J m.
Subscript: x<sub>2</sub>
Superscript: x<sup>2</sup> or x&sup2;







&epsilon;<sub>0</sub> =
8.85 &times; 10<sup>&minus;12</sup>
C&sup2; / J m.
Greek characters:

α β γ δ ε ζ
η θ ι κ λ μ ν
ξ ο π ρ σ ς
τ υ φ χ ψ ω
Γ Δ Θ Λ Ξ Π
Σ Φ Ψ Ω


&alpha; &beta; &gamma; &delta; &epsilon; &zeta; 
&eta; &theta; &iota; &kappa; &lambda; &mu; &nu; 
&xi; &omicron; &pi; &rho;  &sigma; &sigmaf;
&tau; &upsilon; &phi; &chi; &psi; &omega;
&Gamma; &Delta; &Theta; &Lambda; &Xi; &Pi; 
&Sigma; &Phi; &Psi; &Omega;

Math characters:
∫ ∑ ∏ √ − ± ∞
≈ ∝ ≡ ≠ ≤ ≥ →
× · ÷ ∂ ′ ″
∇ ‰ ° ∴ ℵ ø
∈ ∉ ∩ ∪ ⊂ ⊃ ⊆ ⊇
¬ ∧ ∨ ∃ ∀ ⇒ ⇔
(See also [SourceWatch:Special characters|Special characters]])

&int; &sum; &prod; &radic; &minus; &plusmn; &infin;
&asymp; &prop; &equiv; &ne; &le; &ge; &rarr;
&times; &middot; &divide; &part; &prime; &Prime;
&nabla; &permil; &deg; &there4; &alefsym; &oslash;
&isin; &notin; &cap; &cup; &sub; &sup; &sube; &supe;
&not; &and; &or; &exist; &forall; &rArr; &hArr;
x2   ≥   0 true.
  • To space things out, use non-breaking spaces - &nbsp;.
  • &nbsp; also prevents line breaks in the middle of text, this is useful in formulas.
<i>x</i><sup>2</sup>&nbsp;&nbsp;&ge;&nbsp;&nbsp;0 true.


  • Note that any characters can be added inside of <nowiki> < / nowiki>. Following a <nowiki> instruction, any characters including a left angle bracket '<' will not be interpreted as instructions and will appear on the page in the browser. (Except, of course, the nowiki instruction. Remove the space before and after the slash in the < / nowiki> example cited here.)

Tables

An example table
First header Second header Third header
upper left upper middle right side
lower left lower middle
bottom row
<table border="1">
<caption>An example table</caption>
<tr>
<th>First header</th>
<th>Second header</th>
<th>Third header</th>
</tr>
<tr>
<td>upper left</td>
<td>upper middle</td>
<td rowspan=2>right side</td>
</tr>
<tr>
<td>lower left</td>
<td>lower middle</td>
</tr>
<tr>
<td colspan="3" align="center">bottom row</td>
</tr>
</table>

If your table doesn't look right, make sure that all <tr> and <td> tags are closed with corresponding </tr> and </td> tags. Do not indent lines, and do not include empty lines within a table. Otherwise, you will get spurious space above the table or even a browser crash.

Here's a more advanced example, showing some more options available for making up tables. You can play with these settings in your own table to see what effect they have. Keep in mind that though colors are possible, it's best to use them sparingly. Check the above tables to see what can be done to the text inside the cells.

An example table
First header Second header
upper left   right side
lower left lower middle
A table in a table
Experts small.gif Experts small.gif
Two book covers
<table border="1" cellpadding="5" cellspacing="0" align="center">
<caption>'''An example table'''</caption>
<tr>
<th style="background:#efefef;">First header</th>
<th colspan="2" style="background:#ffdead;">Second header</th>
</tr>
<tr>
<td>upper left</td>
<td> </td>
<td rowspan=2 style="border-bottom:3px solid grey;" valign="top">right side</td>
</tr>
<tr>
<td style="border-bottom:3px solid grey;">lower left</td>
<td style="border-bottom:3px solid grey;">lower middle</td>
</tr>
<tr>
<td colspan="3" align="center">
<table border="0">
<caption>''A table in a table''</caption>
<tr>
<td align="center" width="150px">[[Image:Experts_small.gif]]</td>
<td align="center" width="150px">[[Image:Experts_small.gif]]</td>
</tr>
<tr>
<td align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red;
border-bottom:2px solid red; border-left:1px solid red;">Two book covers</td>
</tr>
</table>
</td>
</tr>
</table>

Acknowledgement: the content of many of the help pages in SourceWatch have been adapted from Wikipedia.