Style guide

This page gives example code and advice for styling the wiki. If editors stick to these guidelines, the Chinese Grammar Wiki will have a consistent style and appearance, which is beneficial to users.

Example sentences

The wiki uses mainly <div> tags to enclose groups of sample sentences in tables or lists, but occasionally also makes use of <span> tags for snippets of Chinese within other text. Whether it's a <div> tag or a <span> tag, however, both should take the CSS class liju to apply the appropriate styles.

Example of a <span> tag (normally used within a block of text):

<span class="liju">Chinese would go here.</span>

Example of a <div> tag (normally used to enclose an entire table or list):

<div class="liju">

A table or list full of Chinese would go here.

</div>

Further usage of these is covered below. In either case, separate words in the sentence with spaces to allow browser plugins and other software to parse them more accurately. The CSS class will not show these spaces, so the sentence will still display correctly.

Individual

Style individual example sentences as lists, as described below.

Lists

Wrap the entire list (or lists, if you want separate sections) in a <div> with class liju. Separate words with spaces. Be sure to leave a blank line after opening the <div> and before closing it with a </div>.

A single list of example sentences:

你有没有记住我的名字？
他是不是我们昨天看到的人？

A group of lists with example sentences:

谁能把 ‘ 打喷嚏 ’ 的 ‘ 嚏 ’ 写对 ？
我们刚才听到的音乐是哪个乐队的？

你有没有记住我的名字？
他是不是我们昨天看到的人？

A list of example sentences, some of which are correct, and some of which are incorrect. Note: for this type of list, an HTML list must be used instead of the normal wiki shorthand list so that the individual list item elements (<li>) can be styled with the proper CSS classes.

你把作业 做完 了吗？ (This is a comment to add some explanation.)
你把作业 做做完 了吗？
你把作业 做完 了吗？
你把作业 做做完 了吗？ (This is a comment to add some explanation.)
你把作业 做完 了吗？
你把作业 做做完 了吗？

If you ever need to add spaces back into text inside a list which is wrapped in a <div> with class liju, there are two ways to do it:

For small chunks of texts, wrap the target text in a <span> tag with class spaced. Note that class expl has its own style, which includes normal spacing between words (see the code above).
For entire lines in cases where you're using an HTML list, simply add the class spaced to the appropriate <li> elements. You can add multiple classes to one element, as long as you put a space in between the names (example: <li class="x spaced">).

Remember: if most of the list is in Chinese (is should be the case with examples sentences), wrap the whole list in a <div> with class liju to get the proper style, then target the English content with a <span> tag with class spaced. If most of the table is in English, don't wrap the whole table in a <div> with class liju; instead just target the Chinese content with a <span> tag with class liju. (Note that in this case, the style of the list will look totally different.)

Tables

Wrap the whole table in a <div> with class liju, and add the class wikitable to the table. Specify width in ems, allotting roughly 10em per column. Separate Chinese words with spaces (but not the Chinese character space!). Leave a column for punctuation at the end if your table consists of columns that form sentences.

Be sure to leave a blank line after opening the <div> and before closing it with a </div>.

Result complements with aspect particles
Subject	RC compound verb	Aspect particle	Object
我	看到	了	你	。
我	看见	过	那个有名的人	。
我	听见	过	这个声音	。

If you ever need to add spaces back into text inside a table which is wrapped in a <div> with class liju, there are two ways to do it:

For small chunks of texts, or possibly whole cells if you're using the simple wiki table, wrap the target text in a <span> tag with class spaced.
For entire rows or cells in cases where you're using a complex HTML table, simply add the class spaced to the apropriate <tr> or <td> elements.

Remember: if most of the table is in Chinese, go ahead and wrap the whole table in a <div> with class liju, then target the English content with class spaced. If most of the table is in English, don't wrap the whole table in a <div> with class liju; instead just target the Chinese content with a <span> tag with class liju.

Rules for spacing words

Separating words with spaces in the example sentences helps software to parse them more accurately. The CSS style ensures that the user sees a nicely displayed sentence that is not broken up by spaces. (Just make sure that you add the spaces will using an English input, and not while using Chinese input, which will add "Chinese spaces" which will not be properly handled by the CSS.)

Separate all parts of speech (nouns, verbs, adjectives etc.).
我喜欢红色的自行车。⇒ 我喜欢红色的自行车。
Separate all particles,
吃饭了吗？ ⇒ 吃饭了吗？
Separate numbers and measure words,
一个苹果。 ⇒ 一个苹果。

Patterns

Wrap patterns or structures in a <div> with class jiegou. Be sure to leave a blank line after opening the <div> and before closing it with a </div>.

Subject + 把 + Object + Verb

Note that the text inside the "structures" class is enlarged, but no spaces are collapsed, as they are with tables and lists with the class liju.

Styling elements within the text

Put double quotation marks (") around whole sentences in English or Chinese.
Leave individual Chinese words or characters as they are. They naturally look different to the surrounding text.
Put technical terms in italics (two single quotes on each side).
Put key words (i.e. terms that are central to the content of the article, and are likely to be repeated) in bold italics (three single quotes on each side).

Custom styling

Sometimes you need to apply styling to individual elements that MediaWiki markup doesn't allow. In particular, <li> and <tr>. If you need to style these individually, you have to insert an HTML list or table, still wrapped in the appropriate div described above, and then style the elements manually.