Spacer分隔器

一、中文示例

1. 常规

<a href="https://github.com/sparanoid/chinese-copywriting-guidelines">中文文案排版指北</a>

a. 中英文之间需要增加空格

Halo啊，饭已OK了，下来めし吧！

b. 中文与数字之间需要增加空格

7月末中国外汇储备32359亿美元，创2016年以来新高值。

c. 全角标点与其他字符之间不加空格

正如素有“Web开发圣经”之称的名著《本书does not exist》（Nobody著）所描述的那样，iOS与macOS版本的Safari一直以来都对正则缺乏完整支持，比如：Lookahead表达式。

d. 百分比与数字之间不需要增加空格

乔·拜登在美国2020年大选中获得了51.3%的选票。

e. 半角逗号、冒号、点号，之前不需要加空格，之后需要加空格；若处于段尾则不需要空格。

He said:Let some people get rich first!

He said,<span style="color: blue">Let some people get rich first!</span>

f. 原文含空格

Potato 你个西红柿，tomato 你个马铃薯。

g. 时间

现在是时间是20:22。

2. 大字体

<span style="font-size: 2rem">热烈欢迎Rebecca同志莅临FB指导工作！</span>

3. 图片ALT属性

<img alt="时髦人都很fancy" />

4. 标签（span/font等）混排

<del
    style="color:crimson;background:lightpink">你</del><ins
    style="color: lightseagreen; background: palegreen">我</ins>觉得，<span
    style="color:dimgrey">iPhone手机</span>与<span
    style="color:green">Android手机</span>各有特色。

5. text-align: justify

<div style="width: 150px; text-align: justify">中文ABC，世界World，Global全球500强，100%纯牛奶。</div>

<div style="width: 150px; text-align: justify">中文<span style="color:#333">ABC</span>，<span
                style="color:blue">世界</span>World，<span style="color:red">Global</span><span
                style="color: deeppink">全球500强</span>，100%纯牛奶。</div>

6. 动态内容

<template id="dynamic-content-template">
    <p><time></time>:来是Come去是go。</p>
</template>
<button id="add-dynamic-content">添加</button>
<div id="dynamic-content-wrapper"></div>
<script>
document.querySelector('#add-dynamic-content').addEventListener('click', () => {
    let t = document.querySelector('#dynamic-content-template');
    let time = t.content.querySelector('time');
    time.textContent = new Date().toString();
    let clone = document.importNode(t.content, true);
    document.querySelector('#dynamic-content-wrapper').appendChild(clone);
});
</script>

7. 其他

pre

<pre>这是最后的斗争
团结起来
到明天
International就一定要实现</pre>

这是最后的斗争
团结起来
到明天
International就一定要实现

textarea

<textarea>Spacer支持自定义的间隔内容，从而可以使用CSS精确控制其宽度。</textarea>

input

<input value="在CSS控制间隔宽度需要使用em单位" style="width: 100%" />

button

input:

<input value="1em代表一个全角字符的宽度" type="button" />

button:

<button>若使用25%则表示父元素宽度的四分之一</button>

checkbox

<label><input type="checkbox" />使用CSS控制需要指定wrapper</label>

radio

<label><input type="radio" />wrapper包括open、close两个属性</label>

placeholder

<input placeholder="无论是否指定wrapper，在处理title标签内容时始终使用空格" style="width: 100%" />

select

<select multiple="true">
    <optgroup label="与title同样使用空格的内容">
    <option>optgroup的label属性</option>
    <option>img的alt属性</option>
    <option>input的placeholder属性</option>
    </optgroup>
</select>

code

<code>但诸如input的value等表单数据属性及code的内容，暂未做处理。</code>

blockqoute

<blockquote>处理网页上的内容间隔时，script、style、link、code等元素均会被忽略。</blockquote>

ul

<ul>
    <li>部分以空格为间隔的情况，将会替换为 &amp;nbsp;</li>
</ul>

contenteditable

<div contenteditable="true" style="border:#333 1px solid; width: 50%; height: 200px;">
    contenteditable为true时，实时输入的内容尚不支持间隔。
</div>

二、日本語

ワールドWorld、Globalグローバル500、100%純粋なミルク。

三、한국인

세계World, Global세계500위권, 100%순우유.