如何在网页上对满语/蒙古语脚本进行颜色编码？-解网

问：

我的奥德赛从一个相当简单的任务开始。我在传统文字中有一个满语单词，我想将单词中的所有元音（忽略连字）更改为不同的颜色

<p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p>
<p><span class="red">ᠠ</span>ᠮᠪᡠᠯ<span class="red">ᠠ</span> ᠪᠠᠨ<span class="red">ᡳ</span>ᡥ<span class="red">ᠠ</span></p>

顺便说一句，这不是我测试的实际生产代码，只是我能记住的，所以如果有任何错别字，请原谅我。（类 .red 只定义 color：red;）。

当然，这是行不通的。作为一个草书体，当我将一个字母包裹在一个跨度中时，我正在单词内部创造一个人为的中断。所以我很好奇：阿拉伯语也是一种草书......所以我用阿拉伯语随机抓了一个句子

<p> مرحبًا، كيف يم<span class="red">ن</span>نني مساعدتك؟ </p>

它奏效了（对我来说）。

然后我尝试考虑其他解决方案，但除了使用 HarfBuzz 或在 HTML 画布上手动重新实现字形替换、连接和字距调整规则之外，似乎都行不通，这两者都不是我一个简单的网站想法的想法，坦率地说，我目前都没有能力做到。也许我可以手动编辑字体并将每个字形链接到（可能非法的）unicode 代码点，但这肯定会违反某些在线字体许可证。我也尝试过免费的变体选择器，但无济于事（你不能只用这些选择器获得所有可能的组合，有些字体甚至不支持它们）。

很遗憾，这样一个看似简单的任务这么快就陷入了死胡同;这就是数字时代少数民族草书的烦恼。任何指点将不胜感激！

HTML CSS 字体 WebFonts 文本呈现

@AHaworth 感谢您指出这一点！这不仅仅是一个错别字。正如我所说，我之前测试了一些代码片段，这绝对不是格式错误的标签或引号的问题。我提供的代码只是为了解释问题的本质，但感谢您发现错误——不幸的是，输出仍然是错误的。

0赞 A Haworth 6/22/2023

可以显示输出应该是什么样子，因为对我来说似乎还可以，但我对脚本的了解还不够。如果你能把你的代码做成一个可运行的片段，并测试它是否显示了问题，它也可能对某人有所帮助。

0赞 Quantum Duck 6/22/2023

您需要能够加载兼容的字体，例如“Noto Sans Mongolian”。简单地将代码粘贴到 codepen 中不会显示实际的脚本。我不确定如何将 Noto Sans Mongolian 导入 codepen，我使用字体文件在本地进行测试。

答：

0赞 hjolfaei 6/22/2023 #1

A. 使用 SVG：一种选择是将文本转换为 SVG 图像，并将颜色应用于图像中的特定元素。您可以为每个字符创建单独的文本元素，并使用 CSS 单独设置它们的样式。SVG 使您可以更灵活地操作和设置单个字符的样式。但是，请记住，出于性能考虑，此方法可能不适合大型文本。

B.使用选择器：:nth-letter

<style>
    .red {
        color: red;
    }

    /* Apply red color to the 1st, 3rd, 5th, etc. letters */
    p:nth-letter(odd) {
        color: red;
    }
    
    /* Apply red color to the 2nd, 4th, 6th, etc. letters */
    p:nth-letter(even) {
        color: red;
    }
</style>

<p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p>

请记住，浏览器支持目前是有限的，因此在各种浏览器中测试此代码以确保其按预期工作非常重要。:nth-letter

如何在网页上对满语/蒙古语脚本进行颜色编码？

How to Color-code Manchu/Mongolian Script on Webpage?

评论

评论