Clarity国际化分析

最新推荐文章于 2025-05-16 09:00:00 发布

国际化梦工厂

最新推荐文章于 2025-05-16 09:00:00 发布

阅读量9.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Clarity BiDi 文章标签： clarity 国际化

本文链接：https://blog.youkuaiyun.com/spring1208/article/details/65457461

BiDi 同时被 2 个专栏收录

3 篇文章

订阅专栏

Clarity

1 篇文章

订阅专栏

本文探讨了前端开源框架Clarity的国际化特性，重点分析了<bdi>标签在解决双向文本排列问题中的作用，以及<meta charset>、<time>、<input type='datetime-local'>、<input type='month'>和<input type='week'>等HTML5标签在国际化中的应用。通过实例展示了这些标签如何改善多语言环境下的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端的世界永远是那么的日新月异，在过去的几年中，笔者就亲身经历了从原生JS/DOM/Ajax时代，到YUI/jQuery/ExtJS时代，再到Ember/Backbone/Bootstrap时代，转而至今日的Angular，React/Redux，Vue，Sass，Less，Node，ES6/7。古圣人尝曰：“江山代有框架出，更领风骚几个月”，诚不吾欺也。然而对所有framework来说，其命运似乎也都在不断重复着浩浩汤汤的历史车轮——“其兴也勃焉其亡也忽焉”。每当一个新前端framework横空出世，优点自然铺天盖地的蜂拥而至，各种大字报，小纸条都会不约而同地呼喊包含着例如“Develop Across All Platforms，Speed & Performance，Rapid Development，Reliable，Agile，Efficiency”的口号，这样的套词儿跟《报菜名》一样张嘴就来。其实不难发现，曾几何时，这些臭大街的四级词汇也曾不止一次地用来描述被其改朝换代的先辈们，但这丝毫不会妨碍大家对新框架歇斯底里的追捧和盲从。

“前端如画，一时多少框架”……呜呼哀哉后，重归人间烟火的埋锅造饭依旧是那样的避无可避。从本文开始，笔者也决定要凑个热闹，来分层的介绍一个小众（但工作需要）前端开源框架Clarity（https://github.com/vmware/clarity）以及其中涉及国际化的相关点分析。

官网号称Clarity是一个开源的Design System，他聚集了UX guidelines，HTML5/CSS3 framework，还有Angular2 components。既为了dev而生，也为了designer！另外，他还是跨device和多browser支持的。呃……不得不说，这集其实我看过。

从这个描述看，我们至少知道了Clarity不是横空出世的石猴，而是HTML5 + CSS3 + Angular2的合集。所以，把Clarity跟Angular混为一谈的同学，请自行上思过崖，同时别忘了带上《普通逻辑》教程哦。

Get started部分详细说明了如何初次使用和配置Clarity环境，并提供了三种方式，如无特殊需要，按照推荐的方式即可。对其他方式也感兴趣的话，请自行尝试。

1. Clonethe seed app

git clone https://github.com/vmware/clarity-seed.git

2. Installthe dependencies

npm install

3. Runthe seed app

npm start

关于Clarity的使用，官方同样提供了三种方式，分别是：

1. UX

2. UX and UI

3. Angular2

作者也将按照该顺序，先从前两部分开始，和大家一起抽丝剥茧，一窥究竟。先看看布局吧，Clarity提供了多种container（.main-container .content-container）以及component（header subnav sidebar），可以让designer很容易的利用栅栏模型来构架web layout。但这跟国际化有什么关系么？确实本可以无关的，但只因为一个标签的引入，UX也变成了i18n high risk区域，他的名字叫bdi.

<bdi>

这就是我们常说的BiDi，被该标签包裹的文字排序方向与外部文字相反。需要注意的是IE并未支持该标签。举个简单的例子吧，当同样键入联赛名+ 球队 +积分时，一旦球队名为阿拉伯语，球队积分显示方式便无法与前两者保持一致。

<ul>

<li>英格兰超级联赛曼城:90分</li>

<li>英格兰超级联赛阿森纳:80分</li>

<li>阿拉伯海湾联赛70 نادي العين:分</li>

</ul>

而随着<bdi>的介入，问题迎刃而解。

<ul>

<li>英格兰超级联赛曼城:90分</li>

<li>英格兰超级联赛阿森纳:80分</li>

<li>阿拉伯海湾联赛<bdi>نادي العين</bdi>: 70分</li>

</ul>

<meta charset>

<!DOCTYPE html>

<html>

<head>

<title>国际化测试</title>

</head>

相比于之前版本的HTML中<content="text/html; charset=utf-8">，charset声明确实简化了不少，不是么？其实还有更简化的，来做个测试吧，当我删除掉charset=”UTF-8”，再次输入一个unicode string时，大家认为会发生什么呢？乱码么？呃……让大家失望了，似乎什么都没发生。对，因为HTML5中的默认码表已经被设置为UTF-8啦。