如何在 Windows 的 HTML 中呈现狭窄的不间断空格？

How to render narrow non-breaking spaces in HTML for Windows?

提问by FroMage

In French, typography requires that we use narrownon-breakingspace (U+202F) at various places (“Comme ?a?!”).

在法语中，排版要求我们在不同的地方使用狭窄的不间断空格（U+202F）（“Comme ?a?!”）。

Apparently every browser on windows fails to support that and they all display a weird character instead. This works on most browsers on Mac OS X as well as Linux.

显然，Windows 上的每个浏览器都无法支持这一点，并且它们都显示了一个奇怪的字符。这适用于 Mac OS X 和 Linux 上的大多数浏览器。

Does anyone know how to make Windows browsers render it correctly?

有谁知道如何让 Windows 浏览器正确呈现它？

(I'm assuming it's a Windows bug rather than a browser bug since Firefox and Safari both support it as long as it's not on Windows).

（我假设这是一个 Windows 错误而不是浏览器错误，因为 Firefox 和 Safari 都支持它，只要它不在 Windows 上）。

回答by Verdy_p

Hmmm... no. If the only problem is the fact that  (U+2009) is still breaking, I will prefer to use:

嗯……不。如果唯一的问题是 (U+2009) 仍然损坏，我更愿意使用：

<span style="white-space:nowrap">&thinsp;</span>

to correct the breaking behavior. Why?

纠正破坏行为。为什么？

• Because the French fineis effectively using a nearly fixed width between one sixth to one fourth of a cadratin (0.166 ca. to 0.25 ca., when the standard space is 0.5 ca.) The choice of the width depends on the approach already present within the glyphs defined in a given font.

• Fonts are made to adjust the width of their thin space (U+2009): if these fonts were made by French typographs (for rendering French), the approche(or gaps between letters in words) is narrower than in fonts designed for English: this is because French texts generally contain more letters than equivalent English texts (for exemple the printed Bible), and to avoid increasing the number of printed pages, the glyphs in French fonts were made a bit narrower and with a reduced approach; to compensate this reduction, the French finewas increased in size. (It is often said that U+2009 is one fifth of a cadratin, i.e. 0.2 ca., but this is wrong as this value is just a reasonnable median value, which should effectively be adjusted in fonts according to their design).

• In English with an English typography, the inter-character gaps is already large enough to justify the fact that a no thin space is used in texts near most doublepunctuation signs. However, if French is rendered with a font using an English typography (which has larger inter-character gaps), the fineshould be narrower and should be reduced to 1/6th cadratin.

• So yes, U+2009 ( in the SGML repository) is slightly adjustable, depending on fonts.

• In addition it may be partically justified (when full justification is used, where not just the usual inter-word spaces have their width increased, but also all gaps between characters and normal or ''fine'' spaces (but the other quad spaces MUST NOT have their width adjusted: they are really fixed).

• 因为法国罚款有效地使用了六分之一到四分之一之间的几乎固定的宽度（0.166 ca. 到 0.25 ca.，当标准空间是 0.5 ca.）宽度的选择取决于已经存在的方法在给定字体中定义的字形。

• 字体用于调整其细间距的宽度 (U+2009)：如果这些字体是由法语排版制作的（用于呈现法语），则接近（或单词中字母之间的间隙）比为英语设计的字体更窄：这是因为法语文本通常比等效的英语文本包含更多的字母（例如印刷的圣经），并且为了避免增加印刷页数，法语字体中的字形变得更窄并减少了方法；为了弥补这一减少，法国罚款的数额增加了。（通常说 U+2009 是 cadratin 的五分之一，即 0.2 ca.，但这是错误的，因为这个值只是一个合理的中值，应该根据他们的设计在字体中有效地调整）。

• 在英文版式的英文中，字符间的差距已经足够大，足以证明在大多数双标点符号附近的文本中使用不薄的空格是合理的。但是，如果使用英文字体（具有较大的字符间距）呈现法语，则罚款应更窄，并应减少到 1/6 cadratin。

• 所以是的，U+2009（ 在 SGML 存储库中）可以稍微调整，具体取决于字体。

• 此外，它可能是部分对齐的（当使用完全对齐时，不仅通常的词间空格的宽度增加，而且字符与正常或“精细”空格之间的所有间隙都增加了（但其他四边形空格必须没有调整它们的宽度：它们确实是固定的）。

When you are rendering a document whose page layout is already precomputed (with known fonts and with exact metrics), the thin space (U+2009) is already what you want (because you won't have to worry about the breaking behavior.

当您渲染一个页面布局已经预先计算好的文档（使用已知字体和精确度量）时，细空间 (U+2009) 已经是您想要的（因为您不必担心中断行为。

Unfortunately, Unicode forgotto assign to these quad spaces U+2000..U+2006 (and to the thin space U+2009) the non-breaking behavior in the line-breaking properties.

不幸的是，Unicode忘记为这些四边形空间 U+2000..U+2006（以及细空间 U+2009）分配换行属性中的不间断行为。

The only way for Unicode to correct it (for plain text documents only), was to add another character, namely U+202F (the NARROW NON-BREAKING SPACE) in Unicode 5.1, which was later given the SGML symbolic name "nnbsp" for character references (but the mapping of this named character entity to U+202F is not part of any HTML or XML standard, so this named entity should not be used as well, unless your document defines it explicitly in its embedded DTD !)

Unicode 纠正它的唯一方法（仅适用于纯文本文档）是在 Unicode 5.1 中添加另一个字符，即 U+202F（狭窄的非中断空间），后来为它提供了 SGML 符号名称“nnbsp”字符引用（但此命名字符实体到 U+202F 的映射不是任何 HTML 或 XML 标准的一部分，因此不应使用此命名实体，除非您的文档在其嵌入的 DTD 中明确定义了它！）

But unfortunately, most browsers have forgotten to apply this addition and why it was needed: they assume that the character should be in fonts, but this is clearly not the case.

但不幸的是，大多数浏览器都忘记了应用这个添加以及为什么需要它：他们假设字符应该是字体，但显然情况并非如此。

ALL browsers SHOULD treat U+202F as non-breaking (this is already the case, even if they don't know the character in their internal copy of the UCD).

所有浏览器都应该将 U+202F 视为非破坏性的（已经是这种情况，即使它们不知道其内部 UCD 副本中的字符）。

However, browsers SHOULD NOT depend on the fact that U+202F is defined in a font, instead, they SHOULD provide a fallback to U+2009 (THIN SPACE) when rendering it, each time U+202F is not mapped in the current font, but U+2009 is mapped in the same font (this is generally the case with many fonts).

然而，浏览器不应该依赖于 U+202F 在字体中定义的事实，相反，它们应该在渲染时提供回退到 U+2009（薄空间），每次 U+202F 没有映射到当前字体中，但 U+2009 映射到相同的字体（很多字体通常都是这种情况）。

So this is a problem in HTML renderers (i.e. browsers); I also think that this is more than just a problem of fonts, it is really a BUG of browsers (rather than a bug or limit in fonts), if they don't provide such fallbacks for whitespaces. Of course, all new fonts should map U+202F to the same glyph as U+2009.

所以这是 HTML 渲染器（即浏览器）中的一个问题；我也认为这不仅仅是字体的问题，它真的是浏览器的 BUG（而不是字体的错误或限制），如果他们不为空格提供这种回退。当然，所有新字体都应该将 U+202F 映射到与 U+2009 相同的字形。

Given that the thin space (U+2009, or  ) is very well supported in many fonts, and has the correct width for rendering French texts with fonts made with French typographic metrics, or for rendering English texts made with English typographic metrics, this should really be the correct fallback to use each time the narrow non-breaking space is not available !

鉴于薄空间（U+2009 或 ）在许多字体中得到很好的支持，并且具有正确的宽度来呈现使用法语排版规格制作的字体的法语文本，或呈现使用英文排版规格制作的英文文本，这应该真的是每次狭窄的不间断空间不可用时使用的正确后备！

You can perfectly emulate the desired behavior of U+202F in HTML, by just using U+2009 and making it non-breaking using CSS's "white-space:nowrap". It will always be better than changing the font-size to display a pseudo half-space (because this is not correct with many fonts for which this will still be too large, and also because this does not work as expected in spans of text that have colored backgrounds: changing the font-size modifies the line-height).

您可以完美地模拟 HTML 中 U+202F 的所需行为，只需使用 U+2009 并使用 CSS 的“white-space:nowrap”使其不间断。总是比更改字体大小以显示伪半空间要好（因为这对于许多字体来说仍然是太大的不正确，而且因为这在文本跨度中无法按预期工作有彩色背景：更改字体大小会修改行高）。

So please use this code instead in your HTML or SVG documents (keep U+202F only for plain-text documents):

因此，请在您的 HTML 或 SVG 文档中使用此代码（仅对纯文本文档保留 U+202F）：

<span style="white-space:nowrap">&thinsp;</span>

You can save this sequence in a reusable template, that you can name Template:nnbspin MediaWiki for example, for transcluding it in your pages as {{nnbsp}}.

您可以将此序列保存在可重复使用的模板中，Template:nnbsp例如，您可以在 MediaWiki 中命名该模板，以便将其作为{{nnbsp}}.

Note that it is still preferable to reference the thin space symbolically as  rather than forcing an exact Unicode code point like  : the named entity can be remapped by the renderer, or according to user preferences to another working whitespace.

请注意，最好以符号方式引用细空间， 而不是强制使用精确的 Unicode 代码点，例如 ：渲染器可以重新映射命名实体，或根据用户偏好将其重新映射到另一个工作空白。

Note that MS-word really uses U+2009 and not U+202F for representing its own fine. It is correct, given that Word documents have a precomputed layout, and given that MS-Word enforces locally the non-breaking behavior when computing the page layout. Word documents are not plain-text documents.

请注意，MS-word 确实使用 U+2009 而不是 U+202F 来表示它自己的Fine。这是正确的，因为 Word 文档具有预先计算的布局，并且 MS-Word 在计算页面布局时在本地强制执行不间断行为。Word 文档不是纯文本文档。

• Exemple of rendering (using background colors to exhibit that the line-height is not modified, but unfortunately this site does not allow setting background colors except in <code>sections like here, which use monospace fonts) :

• 渲染示例（使用背景颜色表明行高没有被修改，但不幸的是，除了<code>像这里这样使用等宽字体的部分外，该站点不允许设置背景颜色）：

Exemple de ? fine ? insécable fran?aise correctement codée !

Exemple de ? fine ? insécable fran?aise correctement codée !

• The same withoutthe <code>container does not display the background color, but it does use the normal proportional fonts, so that the thin space is effectively rendered as thin:

• 相同的，而不在<code>容器不显示背景色，但它确实使用正常的比例字体，使得狭窄的空间被有效地呈现为薄：

Exemple de ? fine ? insécable fran?aise ; correctement codée !

例如德? 美好的 ？不可分割的法语 ; 更正代码！

• Example using  (NNBSP which is generally not supported in most fonts, but this may eventually work with your current browser and the fonts installed on your system, such as DejaVu Sans):

• 使用示例 （大多数字体通常不支持 NNBSP，但这最终可能适用于您当前的浏览器和系统上安装的字体，例如DejaVu Sans）：

Exemple de ? fine ? insécable fran?aise ; correctement codée !

例如德? 美好的 ？不可分割的法语 ; 更正代码！

• Example using  (SIXTH OF CADRATIN, may work but may be too narrow for your fonts, and may not exhibit the non-breaking property):

• 使用示例 （SIXTH OF CADRATIN，可能有效，但对于您的字体来说可能太窄，并且可能不会表现出不间断属性）：

Exemple de ? fine ? insécable fran?aise ; correctement codée !(hmmm... not really)

例如德? 美好的 ？不可分割的法语 ; 更正代码！（嗯……不是真的）

• Example using  (which is almost always too large):

• 使用示例 （几乎总是太大）：

Exemple de ? fine ? insécable fran?aise ; correctement codée !(hmm... not really)

例如德? 美好的 ？不可分割的法语 ; 更正代码！（嗯……不是真的）

回答by Rich

I've done a bit more digging, and it does seem like a font problem. FileFormatInfois very useful for dealing with Unicode issues in general, and it includes a pagelisting the fonts that support this particular character. There is even a Flash tool (click inside the blue box on the page listing the supported fonts to get to it - I can't make a correct URL for some reason) that lists all your locally installed fonts and shows this character for each one.

我做了更多的挖掘，它看起来确实是一个字体问题。FileFormatInfo对于处理一般的 Unicode 问题非常有用，它包括一个页面，列出支持此特定字符的字体。甚至还有一个 Flash 工具（单击页面上列出支持的字体的蓝色框内以获取它 - 由于某种原因我无法创建正确的 URL）它列出了所有本地安装的字体并为每个字体显示了这个字符.

回答by Gumbo

Why not just  ?

为什么不只是 ？

回答by Rich

You could do this, but it's not ideal.

你可以这样做，但这并不理想。

<span style="font-size:50%;"> </span>

回答by Morteza Mousavi

You can press Ctrl+shift+2 in a WYSIWYG editor like CKEditor and then go to source HTML view.

您可以在 CKEditor 等 WYSIWYG 编辑器中按 Ctrl+shift+2，然后转到源 HTML 视图。