CZ:How To

[edit intro]

This CZ:How To page illustrates the MediaWiki markup needed to produce certain common page formatting effects, gives directions on how to accomplish some common actions here on Citizendium, and also provides links to many useful articles.

See also How to edit an article for details about markup.

How to format an article

It's relatively easy to start an article. You insert the appropriate tags, write your content, add a few images, include your references, and voila you're done... almost.

Consider this: what does your article actually look like?

Article layouts have a huge impact on readability and aesthetic appearance. Newspapers, books, magazines, and other publications have been studying and changing their layout relentlessly in order to look better, sleeker, and more appealing to the reader. Even the world wide web has gone through multiple revisions of its primary formatting method, and it still isn't great! For these reasons alone, you should consider the way an article appears almost as much as the content itself!

Some of the few things you should consider when writing an article:

• Are there images, and where should they be located? How well do they flow with the text? Are they the correct images according to the text content?
• The table of contents: is it too long or very short, and how does the text flow around it?
• Headings and subheadings: how should your article be organized to be reader friendly?
• Equations and other science/math graphics: will your article look like pointless gobbledee-gook to the average reader? Can someone follow what's being said or computed?

There are multiple tools at your command that you can use to increase article appearance. A few are:

• The {{TOC}} template allows you manipulate the position of the TOC using {{TOC|left}} or {{TOC|right}}.
• Using the "right", "left", and "center" attributes of images will let you position your image on the appropriate side of the page. Is it a wide image? Maybe it should be in the center if it's especially large. If it is a tall, narrow image, consider setting it off to the right.
• Remember: The word-length of each subheading will determine the width of the "Table of Contents". Especially long subheading titles will increase it's width, making it possibly take up more than 50% of the page width. Should your text wrap around it then? Should you have an image opposite it? (Does your section actually need a subheading when it could have just a bolded title?) Don't forget that you can use <BIG></BIG> and '''xx''' to make text LARGE AND BOLD without creating another subheading.

For a lengthier, more complete introduction on how to control what a page looks like, see CZ:How to edit an article.

Special article formatting tools

Here are a few tips on how to get various specific things to appear.

How to add references and/or footnotes to an article

To insert references and/or footnotes in an article, put the material you want in the reference or footnote between <ref> and </ref>. That will create an automatically-ordered superscript numerical reference or footnote (i.e. if you add a new reference or footnote between existing references or footnotes #'s 1 and 2, it will be numbered 2, and the old #2 will be automatically renumbered #3, etc), and saves away the content of the reference or footnote.

Next, at the bottom of the article, where you want the text of the footnotes to appear, put ==References== or ==Notes==, and on the next line, put <references/> (note the / after the keyword). When the page is displayed, the content of the reference(s) and/or footnote(s) will be displayed in the References or Notes section.

How to make an external link open in a new browser tab

External links can be made to open in a new browser tab by placing span tags (with the newtab class) around the link as follows:

<span class="newtab">[https://www.britannica.com/topic/yinyang YinYang Britannica]<span>

Here is the result: YinYang Britannica

How to change fonts

To change the font size on a block of text, wrap it in

<span style="font-size:1.1em">

and:

</span>

Note: 'px' sizes on text should be avoided: this site makes use of scalable text sized in 'em's, and fonts sized using 'px' cannot be scaled by some browsers. So, instead of "font-size:12px;" (for example), say instead "font-size:1.1em;".

Further note: <font> tags were deprecated in the HTML specifications eleven years ago (as of 2008), and should be avoided. Some editors may insert them; these should be removed and replaced with the alternative code format above. For example the old style:

<font size="12px">

would become:

<span style="font-size:1.1em;">

(remembering also, of course, the injunction not to use pixels).

How to make subscripts

Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button.

Or, you can type the code yourself, thus X<sub>2</sub> yields X₂.

How to make superscripts

Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button.

Or, you can type the code yourself, thus X<sup>2</sup> yields X².

How to create a table (manually)

For an extended discussion of how to create tables, and all the available options, see CZ:How to make tables. To create a basic table, see the directions below.

To create the actual table, use:

{|

After the table has been established, use:

|

to create your first data cell. This also begins a new column. To create a new row, simply use

|-

After creating as many columns and rows you wish, close your table by using

|}

A sample table code is below

{|border="1" width=40px 
|column 1, row 1
|align="center"|column 2, row 1
|-
|align="left"|column 1, row 2
|align="right"|column 2, row 2
|}

The table looks like this:

column 1, row 1	column 2, row 1
column 1, row 2	column 2, row 2

How to make arrows

Some arrows can be inserted by clicking on the appropriate arrow located on the bottom of edit pages. They can also be typed as shown by the examples below. Note that the math begin (<math>) and math end (</math>) tags do not need to immediately surround the arrow functions, they only need to be at the beginning and end of equations.

$\rightarrow$ is made from <math>\rightarrow</math> or <math>\rarr</math> or &rarr;

$\leftarrow$ is made from this <math>\leftarrow</math> or <math>\larr</math> or &larr;

$\leftrightarrow$ is made from this <math>\leftrightarrow</math> or <math>\harr</math> or &harr;

${\stackrel {\textstyle \leftarrow }{\rightarrow }}$ is made from <math>\stackrel{\textstyle \leftarrow}{\rightarrow} </math>

$\uparrow$ is made from this <math>\uparrow</math>
$\downarrow$ is made from this <math>\downarrow</math>

Command	Displays as
<math> \mathbf{A} + \mathbf{B} \stackrel{\textstyle \leftarrow}{\rightarrow} \mathbf{AB} </math>	$\mathbf {A} +\mathbf {B} {\stackrel {\textstyle \leftarrow }{\rightarrow }}\mathbf {AB}$
<math> \mathbf{A} + \mathbf{B} \leftrightarrows \mathbf{AB} </math>	$\mathbf {A} +\mathbf {B} \leftrightarrows \mathbf {AB}$
<math> \mathbf{A} + \mathbf{B} \leftrightharpoons \mathbf{AB} </math>	$\mathbf {A} +\mathbf {B} \leftrightharpoons \mathbf {AB}$

How to make chemical equations

Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button.

This text

: 4NaPO<sub>3</sub> + 2SiO<sub>2</sub> + 10C → 2Na<sub>2</sub>SiO<sub>3</sub> + 10CO + P<sub>4</sub>

OR THIS TEXT

:<math> 4 \mathrm{NaPO}_3 + 2 \mathrm{SiO}_2 + 10\mathrm{C} \rarr 2 \mathrm{Na}_2\mathrm{SiO}_3 + 10\mathrm{CO} + \mathrm{P}_4 </math>

provides the following equation (note that colons indent the equation)

4NaPO₃ + 2SiO₂ + 10C → 2Na₂SiO₃ + 10CO + P₄

How to make math equations (italic variables)

Simple algebraic equations

This text

:<math>\left(p + \frac{n^2 a}{V^2}\right)\left(V-nb\right) = nRT</math>

provides this mathematic formula

$\left(p+{\frac {n^{2}a}{V^{2}}}\right)\left(V-nb\right)=nRT$

How to make integral equations

:<math>F(t) = \int_0^t f(x) \, dx.</math> gives this equation:

$F(t)=\int _{0}^{t}f(x)\,dx.$

and this text, :<math>\int_a^b f(x) \, dx = F(b) - F(a).</math>, gives this equation:

$\int _{a}^{b}f(x)\,dx=F(b)-F(a).$

How to make differential equations in dot notation

This text, :<math>\dot{x} = \sigma(y - x)\ ,</math> give this equation in dot notation

${\dot {x}}=\sigma (y-x)\ ,$

This text, :<math>\dot{x}=\frac{dx(t)}{dt}\ .</math> gives this equation

${\dot {x}}={\frac {dx(t)}{dt}}\ .$

How to make summation equations

This text
:<math> X = \sum_{J=1|}^{n} \ c_JV_J. </math>

provides this equation:

$X=\sum _{J=1|}^{n}\ c_{J}V_{J}.$

How to make matrix equations

This text
:<math>M = \begin{pmatrix} 7 & 4.3 & 9 & -3 \\ 0 & 6 & 18 & 42 \\ -10 & 9.5 & 16 & 0 \end{pmatrix}</math>

provides this matrix equation:

$M={\begin{pmatrix}7&4.3&9&-3\\0&6&18&42\\-10&9.5&16&0\end{pmatrix}}$

How to use the timeline template

Within a few of the subpage clusters, you might find a section titled "Timelines", that represent a chronological list of items that pertain to the main article.

Within that page, is the use of a graphical {{Timeline}} template. This is how it's used!

First, create the timeline subpage. This can be done by going into the talk page of the article, clicking "show" to reveal the unused (available) subpage types, and clicking on "Timeline".

Next, add {{subpages}} to the top of the page. Then you're ready to begin the timeline.

Starting the timeline

The first template is called {{timeline}}. It currently has two variables, "title" and "height". Although the title is not currently implemented, eventually it will be, so be sure to fill in a title for your timeline there. The second variable, "height" specifies the height of the timeline "stem". Executing the template looks something like this:

{{timeline
|title=Your title here.
|height=10}}

Adding the first event

The second template is called {{tlevent}}, short for "timeline event". It currently has three variables that must be filled in:

• The first is the event. This is the body of text that will appear in the tab.
• The second is the width. This determines how wide the tab will be on the page. It is recommended that you pick a static width (either in em units, or pixels), mainly because using a percent based width will cause variable word-wrapping within each tab.
• The third is the color. This determines the background color of the tab itself. You can use either "plain-english" colors (e.g. "white", or "blue"), hex-shorthand (e.g. #FFF for all white) or full hex values (e.g. #FFFFFF).

Everything put together looks like this:

{{tlevent
|event=Something happened first
|width=100px
|color=#FFFFFF
}}

You will use this format for each event that you want to add to the timeline. After all events have been written, you must place |} at the end in order to close off the internal table function of the timeline.

Here is the sample script followed by the execution:

{{timeline
|title=The title will eventually show up.
|height=10}}
{{tlevent
|event='''9:41 AM''': First event.
|width=100px
|color=#FFF
}}
{{tlevent
|event='''9:42 AM''': Second event.
|width=100px
|color=#FFF
}}
{{tlevent
|event='''9:43 AM''': Third event.
|width=100px
|color=#FFF
}}
|}
<br/>
<br/>
<br/>
<br/>

And the demonstration:

9:41 AM: First event. 9:42 AM: Second event. 9:43 AM: Third event.

Notice we added a few <br/>s at the bottom of the template. This is to avoid any potential overlapping issues with the graphical layer implemented in the template.

Making adjustments

Notice how the timeline "stem" is too short. This is because 10 units was not long enough to go all the way to the bottom. We can fix this by either increasing the number of units, or making the tabs wider. Let's first try making the tabs wider in order to prevent word-wrapping:

...
...
...
{{tlevent
|event='''9:41 AM''': First event.
|width=200px
|color=#FFF
}}
{{tlevent
|event='''9:42 AM''': Second event.
|width=200px
|color=#FFF
}}
{{tlevent
|event='''9:43 AM''': Third event.
|width=200px
|color=#FFF
}}
...
...
...

9:41 AM: First event. 9:42 AM: Second event. 9:43 AM: Third event.

By increasing the width of the tabs to 200px to avoid word-wrap, we were able to decrease the total height they took up. It almost made the stem go all the way down, but let's add 3 units just to "pretty it up":

{{timeline
|title=The title will eventually show up.
|height=13}}
...
...
...

9:41 AM: First event. 9:42 AM: Second event. 9:43 AM: Third event.

Perfect! If you want to change other aspects of the timeline, including width, adding images, bullets, etc., please look at Template:Timeline/Sample and consult the {{Timeline}} and {{tlevent}} templates for technical updates.

How to use the tlsubevent template

Now that you've added a timeline, we can make it more organized by using the {{tlsubevent}} template. Let's continue our previous example:

{{timeline
|title=The title will eventually show up.
|height=13}}
{{tlevent
|event='''9:41 AM''': First event.
|width=200px
|color=#FFF
}}
{{tlevent
|event='''9:42 AM''': Second event.
|width=200px
|color=#FFF
}}
{{tlevent
|event='''9:43 AM''': Third event.
|width=200px
|color=#FFF
}}
|}
<br/>
<br/>
<br/>
<br/>

9:41 AM: First event. 9:42 AM: Second event. 9:43 AM: Third event.

Let's assume that we want to break this down into hour blocks and post the minutes under each hour block. Let's do this with the first section:

{{timeline
|title=The title will eventually show up.
|height=4}}
{{tlevent
|event='''9:41 AM''': First event.
|width=200px
|color=#FFF
}}
|}
<br/>
<br/>

9:00 AM

Now, let's add a use of the {{tlsubevent}} template.

{{timeline
...
}}
{{tlevent
...
}}
{{tlsubevent
|event='''9:01''': Woke up.
|width=200px
|color=#EEE
|height=20px
|margin=15px
}}

9:00 AM 9:01: Woke up.

Ok! We've added it, but notice it's not aligned correctly. We will have to tweak the height and margin variables to get it to align.

Adjusting the margin and height

Let's adjust the "margin" value first. This will determine how far down or up the actual {{tlsubevent}} is with respect to the main {{tlevent}}. We'll try an extreme value of "40px":

{{timeline
...
}}
{{tlevent
...
}}
{{tlsubevent
|event='''9:01''': Woke up.
|width=200px
|color=#EEE
|height=20px
|margin=40px
}}
|}
<br/>

9:00 AM 9:01: Woke up.

A "40px" margin is almost right on the money. Let's try adjusting the "height" now to "35px" (the "height" is the stem-height):

9:00 AM 9:01: Woke up.

Alright! 35 pixels (35px) was enough to make the stem high enough.

Adding additional events

Let's try adding two more events, one for 9:15 and one for 9:30:

...
...
{{tlsubevent
|event='''9:01''': Woke up.
|width=200px
|color=#EEE
|height=35px
|margin=40px
}}
{{tlsubevent
|event='''9:15''': Brushed teeth.
|width=200px
|color=#EEE
|height=35px
|margin=40px
}}
{{tlsubevent
|event='''9:30''': Packed bags.
|width=200px
|color=#EEE
|height=35px
|margin=40px
}}
...
...

9:00 AM 9:01: Woke up. 9:15: Brushed teeth. 9:30: Packed bags.

We haven't yet played with the heights and margins for the other two events, but we'll fiddle with them and get them right:

9:00 AM 9:01: Woke up. (h=35, m=50) 9:15: Brushed teeth. (h=35, m=60) 9:30: Packed bags. (h=35, m=70)

Looks good! The stems are almost high enough and the margins are right. We have to increase each margin by "10px" per event to compensate for the appearance (there's a -10px intentional margin difference in the code).

Problems

As in the previous {{tlevent}} example, as soon as you end up word-wrapping, you may have to readjust values (you will definitely for this template.) Here's a demo:

...
...
{{tlsubevent
|event='''9:01''': Woke up.  I was really tired and had difficulty opening my eyes.
|width=250px
|color=#EEE
|height=35px
|margin=40px
}}
{{tlsubevent
|event='''9:15''': Brushed teeth with baking soda toothpaste.
|width=250px
|color=#EEE
|height=35px
|margin=50px
}}
{{tlsubevent
|event='''9:30''': Packed bags.  I made sure to pack extra underwear!
|width=250px
|color=#EEE
|height=35px
|margin=60px
}}
...
...

9:00 AM 9:01: Woke up. I was really tired and had difficulty opening my eyes. 9:15: Brushed teeth with baking soda toothpaste. 9:30: Packed bags. I made sure to pack extra underwear!

The stem for the 2nd event ended up too short! This means we have to find the right value. Let's increase the first margin by 10px, and make the stem 5px taller:

9:00 AM 9:01: Woke up. I was really tired and had difficulty opening my eyes. 9:15: Brushed teeth with baking soda toothpaste. 9:30: Packed bags. I made sure to pack extra underwear!

Perfect! On the first example, the height was 40, and the margin was 50. On the second, the height was 60 and the margin was 60. On the third, the height was 60 and the margin was 70. It doesn't matter if the lower stems end up being longer and overlapping, just as long as it looks correct!

How to use the imagemap extension

Imagemaps are a way to deliniate a part of or an entire image into a reference link. It is usually incorporated into such languages as HTML, Java/Script, Ajax, but a mediawiki extension has been added that does the bulk of the complicated work, enabling you to use it with just a few parameters.

The first thing to do is to choose your image. In this case, we'll use "Image:Crystal_Clear_action_bookmark.png" or

Before you apply the imagemap code, you have to know the size of the image in pixels, and the size you're going to use. For example, clicking on the image above takes you to the image wiki page, where it says the image size is "128 x 128" pixels.

You can actually resize the image to any size you'd like by using the regular wikimarkup for image tags:

{{Image|Crystal_Clear_action_bookmark.png|left|100px|This is a thumbnail with a caption}}

produces

This is a thumbnail with a caption

[[Image:Crystal_Clear_action_bookmark.png|75px|left]]

produces

In this case, we don't want to use the thumbnail version (a.k.a. the "polaroid" frame). To begin, we use

<imagemap>
Image:Crystal_Clear_action_bookmark.png|left|100px
rect 1 1 128 128 [[star]]
desc none
</imagemap>

• The <imagemap> tag begins the script for imagemap.
• Next, you specify the image location, along with its orientation and size. In this case, we chose "left" justification and 100 pixels.
• Now, you specify the imagemap shape. For most square images, you simply use "rect", and define the "rectangle" size. Geometrically, a rectangle has practically the same properties of a square, but we simply redefine the rectangle height and width to make it into a square-shape. It's important to note here that you use the exact same dimensions as the original image size, and not the image size you specify. If you try to use "rect 1 1 100 100" for the imagemap, you will only get a portion of the picture as a clickable region since its been shrunk down from its original 128x128 by the image specification. Think of it like a "Shrinky dink" (you may have to look that one up!)
• After defining the area, place the link that it should point to next to the size. It's important that everything is spaced correctly. Not leaving spaces between each argument will make this not work.

Let's see what happens when we put this all together:

Notice when you use the cursor to "hover" over the image, it will say "Star" and clicking it will send you to Star

By changing the "desc" area, you will modify where the imagemap starts and ends. It's best not to change this unless you really know what you're doing or making extremely complicated areas, in which case you're on your own!

Doing things in Citizendium

How to start a new article

Instructions for all methods are located at CZ:How to start a new article.

How to make lowercase article titles

Some pages, like pH and e (mathematics) require lower case titles, which are done like this:
{{lowercase|title=pH}} added at the top of the article gives the correct title form for pH
{{lowercase|title=e (mathematics}} gives the correct title form of e (mathematics).

How to make article titles with a "/" in them

Some pages, like 9/11 require a "/" in their titles, which for technical reasons doesn't work with our subpage system. Use {{slashtitle}}, and follow the instructions on that page.

How to checklist articles

The basic instructions are located at CZ:Using the Subpages template. A weekly list of unchecklisted articles needing attendtion can be found at CZ:Unchecklisted_Articles.

How to add unusual subpages to an article

Citizendium supports subpages types which are only used on a few articles, but they require special configuration. See CZ:Article-specific subpages for more.

How to handle incorrectly named articles

If you see a page which you think has been incorrectly named, look on the article's Talk: page to see if the issue has been previously discussed, and a consensus reached. If not, leave a note with your suggestion, and add {{Rename}} to the bottom of the Talk: page; this adds the article to Category:Rename suggested so we don't lose track of it.

How to handle duplicate articles

When you find a pair of duplicate articles, drop a note on each one's Talk: page, tagged with the template {{Duplicate}}, which takes as an argument the name of the other duplicate article. That adds them to Category:Duplicate articles, so they don't get lost, and notifies the authors/editors in that area that they need to clean up the situation.

Dealing with a duplicate involves three steps:

• Deciding what the preferable title is
• Working out which article has the best content (i.e. should be saved as 'the' article on that topic)
• Seeing if there's any useful material to be salvaged from the other one, and doing the salvage

All of those are best done by someone with some expertise in that area, so generally it's best to just note it, and let those with the expertise deal with it - unless of course you are such a person, in which case you can clean it up.

Note: if you decide the best content is at title A, but the preferable name is B, you will have to get help from a Constable to switch the two articles around. Do not just cut-and-paste the content over - we need to keep the history with the article, for copyright reasons.

How to rename an article

Always use the "move" tab at the top of the page, but...

• It's generally unwise to rename an article created and worked on by others without some discussion (see above).
• If you get an error message for some reason, ask a more experienced user to help you.
• Never move a page by 'cutting and pasting' the contents in the new location - that divorces the text and its 'History', which we need to keep together for copyright reasons.
• It the article you are moving is a cluster, and has subpages, see the instructions here. If those instructions are too daunting, ask for help from an experienced user; we are happy to help.

How to delete an article

You can ask a constable to delete a junk page, or an article you created, by using the speedydelete template. You can simply add {{speedydelete|Insert some reason here}} to the article/image space. For more on deletion, see here.

How to start a new proposal

Instructions for starting a new proposal can be found at CZ:Proposals/New.

How to find editors

To find a list of editors in a particular Workgroup, go to the CZ:Workgroups page and clink on the editors link for the workgroup.

How to make a new template

Before creating a new template, there are several things that must be taken into consideration:

• How will it be used?
• Where will it be used?
• How should it look?
• How flexible will it be?
• Is it needed?
• What need is it fufilling?

Templates are extremely powerful tools for creating dynamic content that you want reproduced or changed with very little effort across a large number of pages. Templates can also be very data sensitive; that is, what kind of data you want to present may determine how your template looks and feels.

The best templates are very flexible, very dynamic, and present information in a "clean" way. This increases their reusability. Templates that limit the information you can change are usually very poor, and have limited use.

Starting a template

The first step in starting a template is determine what it should be called. This is more important than you think! After all, if you create a template called {{infobox_for_different_Wheat_germs_and_their_DNA_structures}} NOBODY will use it. It's too much of a hassle to implement.

Additionally, if you misname your template, it confuses people upon its use. For example, if you create a template called {{paper_colors}} and it actually shows paper dimensions, you will also confuse users (and possibly incite arguments!)

Once you have predetermined these factors, you start your template using the form at CZ:Templates. Let's call this example "add". It will be used to add two numbers. The location is as follows:

http://en.citizendium.org/wiki/Template:add , or Template:Add

Making the template work

After you've created the new page, it's now ready for programming. After all, a blank template will do nothing.

Let's consider what we want the template to do. We're going to take two values, X and Y, and combine their values to produce a third value Z. In order to do this, we have to define these two variables, X and Y. We do this below:

{{{X}}} {{{Y}}}

Now, we have to input the logic to add the numbers. To make mathematical evaluations in wiki software, you must use the {{#expr:}} or "expression" template. It is implemented as such:

{{#expr: {{{X}}} + {{{Y}}} }}

This tells the template to evaluate the expression "{{{X}}} added to {{{Y}}}". Once this is complete, the template can be called as such:

{{add
|X=3
|Y=7
}}

Using the template, we should see the answer below is ten.

Of course, we could have just used the following within the template:

{{#expr: 3 + 7}}

But the problem with this design, is that using the template {{add}} will then always have produced "10", which isn't very flexible, is it? This way, any user can use the Add template to add any two numbers they'd like!

From here on, templates can get more complex. There is a great potential for their use. In fact, you can combine many of the elements found in the CZ:How to page to create some fantastic and highly dynamic templates. Be aware though, that the more complex and dynamic your template becomes, the more difficult it may be to implement. Balancing function with design and usability is a tricky feat, as is with all elements of programming.

Please feel encouraged to test out our new template below, by clicking the "edit" next to the subheading. (Note: You don't have to save the page to see the results of your experiment: just click the Show preview button and you will get a look at it.)

How to write a BAD article

There are a number of items that can make an otherwise good article seem awful. Aside from the usual list of making fictitious claims, falsifying information, not presenting an accurate picture, there are other mechanics that can make an article unreadable and uninteresting. A few of them are listed below:

• Incorrect grammar use and poor sentence structure
• Unnecessary over-complication of the scope of an article
• Confusing and or mixing up tenses
• Lack of clear explanations for concepts
• Excessive use of technical terms without explanations
• Throwing facts together with no clear relations between them
• Making incorrect conclusions based on provided information
• Not writing about the core subject but explaining fringe concepts
• Including rhetoric and hearsay instead of facts
• Misjudgement of your audience

|width=10% align=center style="background:#F5F5F5"|  |}