孟加拉语辅音是ক,খ,গ,ঘ,ঙ,চ,ছ,জ,ঝ,ঞ…10个Kar/元音(缩写)是া,ি,ী,ু,ূ,ৃ,ে,ৈ,ো和ৌ.

总而言之,我想给第一辅音涂上不同的 colored颜色 .但是Kars/元音也会变色.


预期yields

Coloring Bengali Consonants


代码示例

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@100..900&display=swap');
p {
  font-family: "Noto Serif Bengali", serif;
  font-variation-settings: "wdth" 100;
}

mark {
  color: red;
  background: transparent;
}
<p>
  <mark>ক</mark>াগজ<br/>
  <mark>ঠ</mark>েলাগাড়ি<br/>
  <mark>দ</mark>োয়েল<br/>
</p>

更新

我真的很喜欢S的百人pip .我从@etuardu‘S的答案中做了一个css唯一的解决方案.然而,正如@Peter Constable所提到的,它一直起作用,直到基辅音在簇中不变.当基辅音改变时,就像在গুরু,শুরু中一样,这个解决方案将不起作用.

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@100..900&display=swap');
p {
  font-family: "Noto Serif Bengali", serif;
  font-size: 24px;
}

span[data-mark] {
  position: relative;
}

span[data-mark]::after {
  content: attr(data-mark);
  color: red;
  position: absolute;
  left: 0;
  top: 0;
}

span[data-mark-offset]::after {
  left: 0.39em;
}
<p>
  <span data-mark="ক">কাগজ</span><br/>
  <span data-mark="ঠ" data-mark-offset>ঠেলাগাড়ি</span><br/>
  <span data-mark="দ" data-mark-offset>দোয়েল</span><br/>
  <span data-mark="র">রূপ</span><br/>
  <span data-mark="স">সুজন</span><br/>
  <span data-mark="গ">গুরু</span><br/>
  <span data-mark="শ">শুরু</span><br/>
</p>

推荐答案

正如其他人指出的那样,这样的字母组合被视为一个独特的簇,所以实现你的目标并不是一帆风顺的.

一种 Select 可能是使用JavaScript和CSS将<mark>叠加到<span>上的特定位置.通过以em为单位,无论字体大小如何,您都可以确保正确定位.

我知道这个解决方案可能并不理想,但可能适用于某些用例.

document.querySelectorAll('[data-mark]').forEach(e => {
  const mark = document.createElement('mark')
  mark.innerText = e.dataset.mark
  mark.style.left = e.dataset.markOffset
  e.appendChild(mark)
})
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@100..900&display=swap');
p {
  font-family: "Noto Serif Bengali", serif;
  font-size: 24px;
}

mark {
  color: red;
  background: transparent;
}

span[data-mark] {
  position: relative;
}

span[data-mark] mark {
  position: absolute;
  left: 0;
  top: 0;
}
<p>
  <span data-mark="ক">কাগজ</span><br/>
  <span data-mark="ঠ" data-mark-offset=".39em">ঠেলাগাড়ি</span><br/>
  <span data-mark="দ" data-mark-offset=".39em">দোয়েল</span><br/>
</p>

Html相关问答推荐

卡片上方的文本

将多个内联元素置于中心,而无需访问父级上的CSS

如何防止SVG图标出现断行?

首字下沉非字母字符

为什么不是所有字体好的图标都能与boostRapCDN一起使用呢?

如何使用html的<;输入>;处理/绑定Angular 信号?

如何更改计时器S输入的Angular 字体大小?

在悬停时应用文本装饰

如何将内容元素放在侧边栏旁边?

OnChange函数未在下拉列表中使用一个选项触发

类型';联系人组件';上不存在属性';name FormControl';

为什么一个 CSS 网格框比其他网格框低?

使用 Thymeleaf 将图像水平居中

如何使用 CSS 应用带有笔划的文本阴影?

更改标签标签的大小

暗模式转换器

涉及短代码时如何在页面上定位元素?

svg 内容超过元素

Angular Material Hide Password 在输入时切换

用 flexbox 和 overflow 覆盖