Mac版Firefox 128中窄不换行空格(NNBSP)无法正常渲染?
关于Firefox 128无法渲染窄不换行空格(NNBSP)及细空格的问题
原问题围绕「如何在HTML中为Windows渲染窄不换行空格」展开,2021年的补充说明指出:窄不换行空格(NNBSP,字符 )自2021年起应在所有主流浏览器中正确渲染。这对法语排版至关重要——法语排版要求使用不可换行的细空格来规范引号与正文等元素的间距。
我在多款浏览器中测试后发现,Mac版Firefox 128仍无法正常显示NNBSP字符,同时细空格(thin space,字符 )也完全不生效。由于无法在原问题下评论,在此提出以下疑问:
- 这是Firefox的已知问题吗?
- Firefox是否曾经正确渲染过窄不换行空格?
- 我是否应该继续使用自定义hack来实现法语排版所需的细空格效果?
我已经为这个问题搜索了十余年,NNBSP本应是解决法语排版空格问题的理想方案,但如果Firefox至今未实现该字符的正确渲染,对法语网页排版来说是个严重问题(尽管其市场份额近年有所下降)。
我制作了一个HTML测试页面,对比不同空格类型在法语句子中的表现,其中NNBSP和细空格在Firefox 128中完全不显示。调整窗口大小可查看黄色标记空格的换行情况:
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Guillemets et espaces fines</title> <style> /* RESET */ h1, h2, h3, p, ul, ol, li { margin: 0; line-height: 1.25; } body { color: #333; text-align: left; background-color: silver; hyphens: auto; text-align: left; } h1 { font-size: 2.6em; font-weight: 100; color: black; line-height: 1.1; } h1, h2 { margin-top: 1em; margin-bottom: .5em; } p { margin-bottom: .75em; } /* \0020 = espace (normale, sécable) \00A0 = espace insécable ( ) \2009 = espace fine (thin space, sécable) \200A = espace ultrafine (hair space, sécable) \2060 = word joiner (empêche qu'une espace sécable soit sécable ? Nope, marche pas) */ q { quotes: '«\2009\2060' '\2009»' '“' '”'; } small { font-size: .5em; } span { background: gold; } .bug { background: darkred; padding: .5em 1em .25em; color: pink; font-family: Arial, Helvetica, sans-serif; } </style> </head> <body> <h1>Au sujet du match des Diables rouges<span> </span>: «<span> </span>Ce n’est pas contre la France qu’on a perdu l’Euro<span> </span>» <small>(Espace fine insécable #8239)</small></h1> <p>L’espace fine insécable (&#8239;) n’existe pas dans toutes les polices et elle n’est malheureusement pas compatible avec tous les navigateurs.</p> <p class="bug">Ne fonctionne pas sous Firefox (testé sur FF v.128)</p> <h1>Au sujet du match des Diables rouges<span> </span>: «<span> </span>Ce n’est pas contre la France qu’on a perdu l’Euro<span> </span>» <small>(Espace normale)</small></h1> <p>L’espace standard (sécable) disparaît quand le caractère qui la suit passe à la ligne.<br>Les guillemets peuvent alors se retrouver isolés en fin de ligne ou en début de ligne.</p> <h1>Au sujet du match des Diables rouges<span> </span>: «<span> </span>Ce n’est pas contre la France qu’on a perdu l’Euro<span> </span>» <small>(HTML nbsp)</small></h1> <p>L’espace insécable a l’inconvénient d’être plus large qu'une espace fine.</p> <h1>Au sujet du match des Diables rouges<span> </span>: «<span> </span>Ce n’est pas contre la France qu’on a perdu l’Euro<span> </span>» <small>(HTML Thin Space)</small></h1> <p>Contrairement à l'espace standard, l'espace fine (Thin Space) ne disparaît pas quand le caractère qui la suit passe à la ligne.<br>L'espace fine (Thin Space) reste collée au caractère <strong>précédent</strong>.<br>Le guillemet fermant reste collé au signe précédent (y compris Thin Space).<br>Donc, en théorie, les guillemets français <strong>fermants</strong> précédés de l'espace fine restent attachés au caractère qui précède l'espace fine (à tester dans tous les navigateurs).</p> <p class="bug">Ne fonctionne pas sous Firefox (testé sur FF v.128)</p> <h1>Au sujet du match des Diables rouges<span> ⁠</span>: «<span> ⁠</span>Ce n’est pas contre la France qu’on a perdu l’Euro<span> </span>» <small>(HTML Thin Space + Word Joiner)</small></h1> <p>Les guillements fermants précédés de l'espace fine ne posent pas problème (voir ci-dessus).<br>En ce qui concerne les guillemets <em>ouvrants</em>, il faut faire suivre l’espace fine qui suit les guillemets par un caractère spécial « gluon » <em>(Word Joiner)</em> : <code>&NoBreak;</code>.<br>De cette façon, l'espace fine reste attachée non seulement au caractère qui la précède (les guillemets ouvrants), mais aussi au caractère qui la suit (elle devient donc, <i lang="la">de facto</i>, insécable).</p> <p class="bug">Ne fonctionne pas sous Firefox (testé sur FF v.128)</p> <h1>Au sujet du match des Diables rouges : <q>Ce n’est pas contre la France qu’on a perdu l’Euro</q> <small>(CSS Thin Space + Word Joiner)</small></h1> <p>En CSS,<br> <code>\2009</code> correspond à l’espace fine <em>(Thin Space)</em><br> <code>\2060</code> correspond au gluon <em>(Word Joiner)</em>. </p> <p class="bug">Ne fonctionne pas sous Firefox (testé sur FF v.128)</p> </body> </html>
内容的提问来源于stack exchange,提问作者Seb Zaremba
相关产品推荐
相关产品推荐

