Question

我目前正在考虑如何用新语言支持遗留Web应用程序（这里的语言是指口语而不是代码！）。

我将使用某种形式的javascript国际化库来做这件事但是我偶然发现了一个问题。

目前，应用程序可以仅通过键盘快捷键驱动 - 这些快捷方式通过在屏幕上用功能标签的字母加下划线来表示给用户。

例如：

<u>R</u>un
<u>J</u>ump
J<u>o</u>g

问题是当这些字符串被用于国际化的标记替换时，字符串将以纯文本形式存储，我希望不必使用html标记来破坏这些字符串文件（特别是现在不鼓励使用的标记）

如果我们将逻辑分离以决定下划线哪个字母 - 这可能会随着语言的变化而改变 - 我怎样才能强调字符串中的单个字符？它甚至可能吗？

//HTML
<a href="#" id="jump" data-i18n="action.jump"></a>

//Strings file
action.jump=Jump

//Javascript/JQuery
$('<someHowOnlySelectAParticularLetter('J')> #jump').css({text-decoration:overline});

function someHowOnlySelectAParticularLetter(var character){
   //TODO
}

预先感谢任何回复 - 即使我没有明确解释手头的问题，请说明一下，我会尝试澄清任何问题！

Answer 1

什么字母“有效”取决于语言，因此此信息必须存储在每种语言特定的配置文件（转换表文件）中：

English:
RUN: "Run"
RUN_ACTION: "R"

French:
RUN: "Courir"
RUN_ACTION: "C"

然后使用此信息（和元信息）生成HTML：

function buildAction(label, letter) {
    return label.replace(letter, '<u id="action-' + letter + '">' + letter + '</u>');
}

var html = '<p>menu: ' + buildAction(RUN, RUN_ACTION) + ', ...</p>';
document.write(html);

然后你可以$('#action-' + RUN_ACTION).css和$('#action-' + RUN_ACTION).click。

使用此功能，您只需在转换表文件之间切换。

虽然我会生成HTML服务器端。

Answer 2

似乎你必须使用一点RegEx（正则表达式）和.split才能获取该字母，将其存储在变量中，然后使用jquery的.css方法对其进行样式设置。

Answer 3

如果你想继续使用那种设计，你会遇到各种各样的问题。

如果翻译的单词没有您应用于其他语言的字母快捷方式，该怎么办？
如果用户习惯了一组快捷方式并更改了语言，他习惯改变的所有捷径都是？

例如，Ctrl + S是一种广泛使用的Save快捷方式，即使某些语言的“保存”翻译中没有S.将该字母更改为W，这是Quit的常用快捷方式，您可能会遇到令人不快的用户体验。

我建议您将标记更改为

(R) Run
(J) Jump
(O) Jog

这样你只需翻译单词部分，然后保留原样。

Answer 4

将数据与演示文稿分开是一个令人钦佩的目标。

我认为纯CSS不会让你一路走来，也没有一些支持的HTML标记。

您实际上需要两个地方的热键信息：

在UI标记
在处理按键的代码中

我建议您以类似于以下格式存储有关热键的信息：

// Word       Hotkey    Offset    Function    Language
// Sichern    S         0         Save        DE
// Springe    p         1         Jump        DE

（上面的示例使用德语）。

使用该数据来驱动

呈现UI（例如，在呈现为HTML标记时，使用您选择的符合CSS规则的标记包装Offset指定的字符位置。
使用捕获关键点击和执行功能的代码使用相同的数据。

如何在不破坏文本内容本身的情况下将CSS应用于某些文本的一部分

4 个答案: