使用CSS“；布置格线类型：固定“；混合日语和英语文本_Css_Typography

使用CSS“；布置格线类型：固定“；混合日语和英语文本

css

使用CSS“；布置格线类型：固定“；混合日语和英语文本,css,typography,Css,Typography,我需要在同一个文本中混合英语和日语汉字（paragrah）。我在W3C（）上找到了CSS属性layout grid type，当设置为“fixed”时，它似乎正是我所需要的。我尝试了下面的代码示例，但无法按预期工作。所有字符（罗马、汉字甚至符号）必须具有相同的边界框宽度（无论两者之间的间距如何） .举例{ 布置格线类型：固定式； } 布局网格类型こ子: 固定的我在这里犯了什么错？多谢各位 [编辑]我意识到上面的W3C文档是一个草稿，似乎没有发布。那么，有没有人喜欢这种演讲风格？谢谢

我需要在同一个文本中混合英语和日语汉字（paragrah）。我在W3C（）上找到了CSS属性layout grid type，当设置为“fixed”时，它似乎正是我所需要的。我尝试了下面的代码示例，但无法按预期工作。所有字符（罗马、汉字甚至符号）必须具有相同的边界框宽度（无论两者之间的间距如何）


.举例{
布置格线类型：固定式；
}
布局网格类型こ子: 固定的

我在这里犯了什么错？多谢各位

[编辑]我意识到上面的W3C文档是一个草稿，似乎没有发布。那么，有没有人喜欢这种演讲风格？

谢谢你，凯文，博客澄清了这一切

此标题足以获取全部地址：所有字符和符号现在都具有相同的宽度

[编辑]：在中工作！字符宽度在其他浏览器中不相同。。。回到原来的问题：(


.举例{
文本转换：全宽度；
空白：预处理；
}
布局&uarr；t形网格类型こ子: 固定的
布局网格类型こ子: 固定的
123456789012345678901234567890
56789012345678901234567890
&uarr；&uarr；&larr；&rarr；&darr；↑↑56789012345678901234567890
↑↑↑↑56789012345678901234567890

我想我找到了另一种选择：文本转换：全宽是字符的解决方案。但是，它不像pre那样保留空格……我发现空白：pre；有助于保留空格！几乎所有问题都已解决。剩下的最后一个问题是非文本的符号不受文本转换的影响。例如，此箭头“↑" 看起来和这里一样窄。我需要它和所有其他字符一样宽…请参见：

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

<!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>