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.

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 so that the individual list item elements ("li") can be styled with the proper CSS classes.

  • 作业 做 完 了 吗 ?
  • 你 把 作业 了 吗 ?
  • 作业 做 完 了 吗 ?
  • 你 把 作业 做 做 完 了 吗 ?
  • 作业 做 完 了 吗 ?
  • 作业 做 做 完 了 吗 ?

Tables

Wrap the whole table in a div with class liju. Separate words with spaces. Leave a column for punctuation at the end. Be sure to leave a blank line after opening the div and before closing it.

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

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.

  • 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.

Subject + 把 + Object + Verb

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.