使用HTML和CSS包含本地化和多语言内容_极简慕枫

随着Shopify向更多国家传播，我们有时会遇到设计和发展文化差异。虽然UI（用户界面）的国际化使目标受众的本地化变得更容易，但HTML和CSS也可以成为强大的工具，使我们能够同时实现本地化和国际化。

对于设计师而言，面临的挑战是设计考虑本地化的内容，同时考虑文本方向或本地语言字符等方面。对于开发人员来说，面临的挑战是以最少的代码输入实现这些方面。

长沙网页设计在本文中，我们将介绍在构建本地化产品时可帮助您实现这两个要求的六个注意事项。

1.写作模式

writing-mode: vertical-lr;

该writing-mode属性设置内容的书写方向，例如，水平或垂直。

在设计通过应用垂直布局的内容时，writing-mode: vertical-lr与拉丁语言脚本（包括阿拉伯数字和符号）相反，东方语言脚本中的字符不会旋转。在日本的Shopify Partner Perks页面上，从更改transform: rotate(90deg)为writing-mode: vertical-lr，为日语使用者创建正确的显示，并仍然保持英语语言环境相同。

出于纯粹的装饰目的，writing-mode仍然提供sideways-lr和sideways-rl，具有与transform: rotate(90deg)和相同的结果transform: rotate(-90deg)。目前只在Firefox中支持横向书写模式。

传统的日文和中文内容应从右到左排列。Huijing Chen展示了中国排版在传统的垂直布局和现代水平布局之间的转换，以突出其差异。写作模式旨在处理内容显示中的文化差异，这对于本地化非常重要。

长沙网页设计

2. ch长度单位

max-width: 20ch;

的chCSS长度单位表示字形“0”的1米半角形式字符宽度。由于东方语言的特征，字符总是具有固定的宽度，包括注释，其被称为全宽形式。当ch应用于文本宽度时2ch，与拉丁语言字符的半宽形式中的两个字符相比，全角字符占用一个字符。

在典型的英文排版中，每行少于60个字符是优选的，这反过来意味着东部语言以全宽形式每行30个字符。比较像素值时，该ch单位适用于所有字体大小，对于在断点处更改字体大小的响应式布局非常有用。为排版目的控制字符数也更容易。

3.引号和多语言内容

<q>こんにちは<q>世界</q></q>

的<q>HTML元素指示在短直列形式报价。引号具有基于语言的不同外观。例如，我们使用“”英语