突出显示组合字符

时间：2014-10-16 15:12:52

标签： html css html5 css3 combining-marks

我正在尝试构建一个小型系统，该系统突出显示与常规字符不同颜色的字符组合。请看以下示例：

＆＃13;
＆＃13; 
* { font-size: 72px }
b { font-weight: normal; color: red }
＆＃13; 
Te&#x301;st A&#x334; B&#x353; <br/>
Te<b>&#x301;</b>st A<b>&#x334;</b> B<b>&#x353;</b>
＆＃13;
＆＃13;
＆＃13;

我希望用红色突出显示三个组合字符（急性重音，波浪形重叠和下面的x），但如果在原始文本中则保持精确到位。问题是，当我将一个组合字符包装在一个HTML元素中时，它就不再被附加了＆＃39;到基本字符，而是与文本的其余部分内联。

有没有办法用HTML / CSS完成这个？

注意：我已经审核了答案here和here，但他们似乎都只是在几何上解决问题 - 这就是他们突出显示某个区域内角色的一部分。这个问题具体是关于突出＆＃39;印刷＆＃39;组合字符的各个方面。

4 个答案:

答案 0 :(得分：1)

我不相信我完全理解你的问题，但是这里有。如果您只是需要重音回到正确的位置，现在它是单独设置的样式，您可以应用类似的东西：

* { font-size: 72px }
b { font-weight: normal; color: red; position: absolute; top: 52%;}
Te&#x0301;st <br/>
Te<b>&#x0301;</b>st

答案 1 :(得分：1)

好吧，我认为我找到了部分解决方案，但这有点棘手。基本上，我必须使用组合字符渲染整个角色，然后将其隐藏在其上面的另一个角色，而不使用任何组合字符：

＆＃13;
＆＃13; 
* { font-size: 72px }
b { font-weight: normal; color: red; width: 0px; overflow: visible; display: inline-block; }
i { font-style: normal; color: black; }
＆＃13; 
Te&#x0301;st <br/>
T<b>e&#x0301;</b><i>e</i>st
＆＃13;
＆＃13;
＆＃13;

不幸的是，当反锯齿时，这会给基本字符留下一个非常轻微的红色轮廓。

enter image description here

它不适用于某些叠加字符。在此示例中，红色条应为黑色d：

＆＃13;
＆＃13; 
* { font-size: 72px }
b { font-weight: normal; color: red; width: 0px; overflow: visible; display: inline-block; }
i { font-style: normal; color: black; }
＆＃13; 
d&#x336; <br/>
<b>d&#x336;</b><i>d</i>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

我差不多一年后就解决了这个问题，而且我已经找到了一个使用SVG的更令人满意的（虽然更详细）解决方案。基本上，这与我之前基于HTML / CSS的版本类似，但SVG使您能够剪切/屏蔽底层基本字符的消除锯齿边缘。

唯一真正存在的问题是如何处理叠加字符（其中组合字符直接呈现在基础字符之上）。在这种情况下，您需要在叠加层顶部渲染基本字符（在我的用例中不是优选的）或在占位符空格字符上渲染叠加层，该字符不一定与基本字符的宽度完全匹配。这是一个示范：

＆＃13;
＆＃13; 
svg text {
  x: 50px;
  y: 50px;
  alignment-baseline: middle;
  text-anchor: middle;
  font-size: 55px;
}
svg .backdrop {
  x: 1px;
  y: 1px;
  rx: 15px;
  ry: 15px;
  width: 98px;
  height: 98px;
  fill: url(#grad);
}
svg .cc-above { fill: #F00; }
svg .cc-below { fill: #00F; }
svg .cc-overlay { fill: #0FF; }
svg .cc-base { fill: #000; }
svg .cc-mask { stroke: #000; stroke-width: 3px; }
.sample { float: left; }
.caption { display: block; text-align: center; }
＆＃13; 
<div class="sample">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100px" height="100px" viewBox="0 0 100 100">
    <defs>
      <text id="base" x="50" y="50">e</text>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#DDD;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#888;stop-opacity:1" />
      </linearGradient>
    </defs>
    <rect class="backdrop" />
    <mask id="mask1">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
      <use xlink:href="#base" class="cc-mask" />
    </mask>
    <text class="cc-above" x="50%" y="50%" mask="url(#mask1)">e&#x0300;</text>
    <use xlink:href="#base" class="cc-base" />
  </svg>
  <div class="caption">Above</div>
</div>

<div class="sample">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100px" height="100px" viewBox="0 0 100 100">
    <defs>
      <text id="base" x="50" y="50">e</text>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#DDD;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#888;stop-opacity:1" />
      </linearGradient>
    </defs>
    <rect class="backdrop" />
    <mask id="mask1">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
      <use xlink:href="#base" class="cc-mask" />
    </mask>
    <text class="cc-below" x="50%" y="50%" mask="url(#mask1)">e&#x031F;</text>
    <use xlink:href="#base" class="cc-base" />
  </svg>
  <div class="caption">Below</div>
</div>

<div class="sample">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100px" height="100px" viewBox="0 0 100 100">
    <defs>
      <text id="base" x="50" y="50">e</text>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#DDD;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#888;stop-opacity:1" />
      </linearGradient>
    </defs>
    <rect class="backdrop" />
    <mask id="mask1">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
      <use xlink:href="#base" class="cc-mask" />
    </mask>
    <use xlink:href="#base" class="cc-base" />
    <text class="cc-overlay" x="50%" y="50%">&#x2002;&#x0334;</text>
  </svg>
  <div class="caption">Overlay</div>
</div>

<div class="sample">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100px" height="100px" viewBox="0 0 100 100">
    <defs>
      <text id="base" x="50" y="50">e</text>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#DDD;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#888;stop-opacity:1" />
      </linearGradient>
    </defs>
    <rect class="backdrop" />
    <mask id="mask1">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
      <use xlink:href="#base" class="cc-mask" />
    </mask>
    <text class="cc-above" x="50%" y="50%" mask="url(#mask1)">e&#x0300;</text>
    <text class="cc-below" x="50%" y="50%" mask="url(#mask1)">e&#x031F;</text>
    <use xlink:href="#base" class="cc-base" />
    <text class="cc-overlay" x="50%" y="50%">&#x2002;&#x0334;</text>
  </svg>
  <div class="caption">All</div>
</div>
＆＃13;
＆＃13;
＆＃13;

我对SVG没有太多经验，并且有人能够找到进一步改进此解决方案的方法。

答案 3 :(得分：0)

这是一个黑客但是如何使用text-indent:-1ex将重音移回1个字符的宽度。 http://jsfiddle.net/1tm1Lrrp/4/

在任何情况下，这些建议都不适用于i，因为点仍然存在。

相关问题
最新问题