使用 CSS "layout-grid-type:Fixed" 混合日文和英文文本

问题描述

我需要在同一个文本中混合使用英文和日文汉字（段落）。我在 W3C (https://www.w3.org/TR/1999/WD-i18n-format-19990127/) 上发现了 CSS 属性 layout-grid-type，当设置为“固定”时，它似乎完全符合我的需要。我尝试了以下代码示例，但无法按预期工作，like this for example。所有字符（罗马字符、汉字甚至符号）都必须具有相同的边界框宽度（无论它们之间的间距如何）。

<head>
    <style>
        .example {
            layout-grid-type: fixed;
        }
    </style>
</head>
<body>
    <div class="example">layout-grid-typeこ子: fixed</div>
</body>

我在这里错过了什么？谢谢。

[edit] 我意识到上面的 W3C 文档是草稿，似乎并没有像它那样发布。对于这种演示风格，还有其他选择吗？

解决方法

谢谢凯文，博客澄清了一切！

这个标题足以得到所有地址：所有字符和符号现在都具有相同的宽度。

[编辑]：这适用于 Firefox only ！其他浏览器的字符宽度不一样... 回到原来的问题:(

<!doctype HTML> 
<html lang="ja-jp" /> 
<head>
  <meta charset="utf-8" />
    <style>
        .example {
            text-transform: full-width;
            white-space: pre;
        }
    </style>
</head>
<body>
    <div class="example">layo&uarr;t-grid-typeこ子: fixed</div>
    <div class="example">layo ut-grid-typeこ子: fixed</div>
    <div class="example">123456789012345678901234567890</div>
    <div class="example">    56789012345678901234567890</div>
    <div class="example">&uarr;&uarr;&larr;&rarr;&darr;↑↑56789012345678901234567890</div>
    <div class="example">↑↑↑↑56789012345678901234567890</div>
</body>

typography