css 如何在网页上对满蒙文字进行颜色编码？

vawmfj5a 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(134)

我的冒险之旅是从一个相当简单的任务开始的。我有一个满文字在传统的脚本，我想改变所有的元音在这个词（忽略连字），以不同的颜色

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

顺便说一句，这不是我测试的实际生产代码，只是我能记住的，所以如果有任何错别字，请原谅我。（class .red只是定义了颜色：red;）.
当然，这并没有奏效。作为一个草书，当我把一个字母包裹在一个跨度里时，我在单词内部创造了一个人工的断裂。所以我很好奇：阿拉伯文也是草书。。所以我随便找了一句阿拉伯语

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

它（对我）起了作用。
然后，我尝试考虑其他解决方案，但没有什么比使用HarfBuzz或重新实现字形替换，连接，字距调整规则在HTML画布上手动似乎做的伎俩，这两个都不会是我的一个简单的网站想法的想法，坦率地说，这两个我目前没有能力做到。也许我可以手动编辑字体并将每个字形链接到一个（可能是非法的）unicode代码点，但这肯定会违反一些在线字体许可证。我也试过自由变量选择器，但没有用（你不能得到每一个可能的组合只是与这些，有些字体甚至不支持它们）。
很可惜，这么简单的工作，这么快就陷入了死胡同;这就是少数草书在数码时代的烦恼。任何指示将不胜感激！

css

来源：https://stackoverflow.com/questions/76529333/how-to-color-code-manchu-mongolian-script-on-webpage

1条答案

按热度按时间

c0vxltue1#

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的支持是有限的，因此在各种浏览器中测试此代码以确保其按预期工作非常重要。

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何在网页上对满蒙文字进行颜色编码？

1条答案

相关问题

热门标签

最新问答