Internationalization — HTML Attributes

各位同学，大家好！今天我们来聊聊一个在国际化应用中特别重要，但容易被忽视的细节——就是如何在HTML里正确设置 `lang` 和 `dir` 这两个属性。它们看起来很简单，但对可访问性和页面正确渲染，真的非常关键。 先说说为什么。首先，屏幕阅读器靠什么来正确发音？就是靠 `lang` 属性。假如你的应用是给美国用户用的，那你就得设置 `lang="en-US"`，这样阅读器会用美式英语发声。如果是日本用户，就改成 `"ja"`，阿拉伯语就是 `"ar"`。如果这个属性错了，屏幕阅读器可能会乱读，甚至根本发不出声来，这对视障用户来说体验就非常糟糕。 那 `dir` 是做什么的呢？它负责文字方向。英语、西班牙语、法语这些是从左往右读的，就用 `dir="ltr"`，意思是 left‑to‑right。而阿拉伯语、希伯来语、波斯语这些是从右往左读，就得设为 `dir="rtl"`。如果不设置，文字方向可能乱套，布局也全垮了。 有了这个基础，我们还能在CSS里做一些针对方向的样式微调。比如，你可以用属性选择器 `[dir='rtl']` 来专门给从右到左的语言加样式，比如调整内边距、浮动方向等等，让界面在两种阅读方向下都自然。这样你的组件就真正做到适配多语言了。 那这些属性和它们的值从哪里来呢？在一个工程化的应用里，我们不能自己随便拼字符串，得遵循标准。Unicode 组织定义了一套叫 LDML 的规范，全称是本地数据标记语言（Locale Data Markup Language），里面就规定了语言标签和方向该怎么写。Salesforce 平台也是基于这套规范，所以我们要保持一致。 在 Lightning Web Components 里，实现起来其实有个很清晰的模式。你只需要做三步：第一步，导入相关的国际化属性，比如从 `@salesforce/i18n` 模块里拿到用户的 `lang` 和 `dir`；第二步，在 JavaScript 类里把导入的值赋给两个用来绑定的字段；第三步，在模板的 `` 标签上，直接把 `lang` 和 `dir` 属性绑定上去，像这样 `lang={language}` `dir={direction}`。这样每个用户看到的界面就自动跟着他的语言和方向设好了。 总结一下，要做出真正面向全球用户的 Salesforce 应用，一定不能忘记在根元素设置正确的 `lang` 和 `dir`。它既帮助屏幕阅读器正确工作，也让文字方向自动适配，搭配一点CSS技巧，就能轻松搞定国际化布局。记住这个三步走：导入 → 赋值 → 绑定，你的组件就成功了一大半。 好了，今天就讲到这里，大家可以在自己的组件里试试看，有问题随时问我！