Skip to content
Requirements for Chinese Text Layout
HTML CSS JavaScript

Requirements for Chinese Text Layout | 中文排版需求

This document is being developed by the Chinese Layout Task Force and the W3C Internationalization Working Group.


Feedback about the content of this document can be submitted via issues or pull request in the GitHub repo. You are also welcome to send your comments to:

若对本文档有任何建议或反馈,欢迎通过GitHub提交issues或者pull request。同时也欢迎使用:

Editorial guidelines | 编辑指南

Combining the English and Chinese text in one document makes it much easier to develop and maintain content in both languages in parallel. Note that the English version will be the authoritative version, since it is more widely accessible to developers around the world.


Creating or modifying content | 添加或修正内容

When creating new content, you should always create markup for both English and Chinese versions.


For example:

<p data-lang="en">The same text in English.</p>
<p data-lang="zh">此為漢語文本。</p>

If you are able to create text in both English and Chinese, please do so. If you are only able to create text in one language, still create the dual structure in markup, but put the same text in both places. Then add class="translateme" to the text that needs translation.


For example:

<p data-lang="en" class="translateme">此為漢語文本。</p>
<p data-lang="zh">此為漢語文本。</p>

If you change existing text, and if that change requires a change in the parallel translation but you are unable to do so, add class="translateme" to the text that needs to be updated.


When text highlighted by the translateme class is updated, and matches the recent changes in the other language, the class should be removed.


Markup tips | 標記小提示

Here are some tips on how to maintain the parallel language structure in markup. The principles in these example approaches should be extended to other markup as needed.


  • The English text should always come before its corresponding Chinese text.


  • List elements need p elements inside them。


      <p data-lang="en" class="translateme">这是中国的文字。</p>
      <p data-lang="zh">这是中国的文字。</p>
  • Headings should use spans for zh and en versions, and there should be a line break between spans.


      <span data-lang="en">My heading</span>
      <span data-lang="zh">我的标题</span>
  • Attribute ids should go on section elements, not h[1-6] elements.


    <section id="h_my_heading">
        <span data-lang="en">English heading</span>
        <span data-lang="zh">漢語標題</span>
  • Attribute ids on dfn elements should start with xxdef, where xx is either zh or en.


    <p data-lang="en">The <dfn id="endef_term">term</dfn> is a technical word.</p>
    <p data-lang="zh">这个<dfn id="zhdef_term">词汇</dfn>是一个技术用语。</p>
  • figcaptions should use spans for the different language versions.


      <!-- 圖表內容。 -->
      <!-- Figure content. -->
        <span data-lang="en">English caption</span>
        <span data-lang="zh">漢語說明</span>
  • Use the following markup for Unicode codepoint names:


    <span class="uname">U+3002 IDEOGRAPHIC FULL STOP</span> [。]

For additional ideas about markup and styling in Internationalization Activity documents, especially wrt inline markup conventions, see


Last-minute Pre-publication edits | 发布前的最后改动备忘录

Make the following changes to the respec file before pushing to GitHub:


  1. in the SoTD, change the link on "latest dated version in /TR" to the location of the document that is about to be published.


  2. Change the path in following code to the same location above:


    <link rel="canonical" href=""/>
  3. Change previousPublishDate to reflect the date of the last publication.


Make the following edits to the snapshot of the file that will be published to TR.


  1. Convert the content of the h1 tag to the following:


    Requirements for Chinese Text Layout 
    <span data-lang="zh" lang="zh">中文排版需求</span>
  2. Remove:

    <link rel="canonical" href=""/>
Something went wrong with that request. Please try again.