0

我正在开发一个国际化/本地化 Web 应用程序的项目。我正在研究什么 CSS 构造可以插入或生成文本内容。

我知道::before 和 ::after 伪元素,并且基于 MDN内容 CSS 属性文档,我认为这就是全部。还有其他我应该注意的结构吗?

element:after  { style properties }  /* CSS2 syntax */

element::after { style properties }  /* CSS3 syntax */

另外,我知道我有一些图像(和图像精灵),其中包含用于background-url构造的英文单词。

编辑:我最初的问题并不清楚,但我正在重构整个应用程序中的硬编码语言字符串,并试图在 CSS 中找到它可能存在的位置。我对服务器和客户端生成的视图充满信心,对带有文本内容的图像不太有信心,并且不清楚 CSS 构造可能包含英文可显示文本。

4

1 回答 1

2

您在问题中提到的是 CSS 必须生成文本内容,如果我们不计算CSS3 Generated and Replaced Content Module,这是 2003 年的工作草案。草案使该content属性也适用于普通元素,因此您可以替换元素内容,而不仅仅是添加内容(这样您就可以拥有.greeting:lang(en) { content: "Hello world!" } .greeting:lang(es) { content: "¡Hola, mundo!" })。但这仅在 Opera 中实现。

使用 CSS 进行本地化的一种更现实的方法是将 HTML 文档中的所有语言变体作为具有lang属性的不同元素放置,并在 CSS 中在它们之间进行选择,例如

<style>
[lang=es] [lang=en], 
[lang=en] [lang=es] 
  { display: none; }
</style>
<body lang=en>
<p lang=en>Hello world!</p>
<p lang=es>¡Hola, mundo!</p>

然后,您只需更改元素lang上的属性值即可更改可见文本的语言。body

这种方法有本质的缺陷,所以我描述这个基本上是为了表明CSS 不是本地化的答案。这是你能得到的最好的方式,但它并不好。对于网页,您不希望为搜索引擎提供内容中包含如此多种语言的页面。对于应用程序,JavaScript 是一个更好的工具。

另一方面,本地化对样式提出了一些特定的挑战,例如文本用完它们的框,因为某些翻译比视觉设计师预期的时间长两倍。

于 2013-04-19T05:09:32.027 回答