하이라이트 조합 문자

Question

나는 일반 문자와 다른 색으로 문자를 결합하는 작은 시스템을 만들려고 노력하고 있습니다. 다음 예를 보자

* { font-size: 72px } 
 
b { font-weight: normal; color: red }

Te&#x301;st A&#x334; B&#x353; <br/> 
 
Te<b>&#x301;</b>st A<b>&#x334;</b> B<b>&#x353;</b>

내가 빨간색으로 강조 할 수있는 세 가지 결합 문자 (악센트, 물결표 오버레이, 아래 X)를하고 싶습니다,하지만 그들이 경우에 어디 있었는지 정확하게 유지 원본 텍스트에. 문제는 HTML 요소에서 결합 문자를 래핑 할 때 더 이상 기본 문자에 '첨부'되지 않고 나머지 텍스트와 함께 인라인된다는 점입니다.

HTML/CSS로이를 수행 할 수있는 방법이 있습니까?

참고 : 내가 답변 here 및 here을 검토했지만, 그들은 모두 전용 '기하'가 특정 지역 내에서 문자의 부분을 강조하다 —을 문제를 공격하는 것 같다. 이 질문은 특히 결합 문자의 '인쇄상의'측면을 강조하는 것입니다.

Answer 1

내가 거의 일년 후이 질문을 revisting있어, 나는 (더 만족을 알아 냈어요 훨씬 더하지만 verbose) 솔루션을 SVG를 사용합니다. 기본적으로 이것은 이전 HTML/CSS 기반 버전과 유사하지만 SVG는 기본 기본 문자의 앤티 앨리어스 가장자리를 클립/마스크 아웃 할 수있는 능력을 제공합니다.

남은 유일한 문제는 오버레이 문자 (결합 문자가 기본 문자 위에 직접 렌더링되는 경우)를 처리하는 방법입니다. 이 경우 오버레이 상단에 기본 문자를 렌더링하거나 (사용상 바람직하지 않음) 기본 문자의 너비와 완전히 일치하지 않는 자리 표시 자 공백 문자에 오버레이를 렌더링해야합니다. 여기 데모는 다음과 같습니다

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; }

<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>

나는이 솔루션 추가를 개선 할 수있는 방법을 찾을 수 있습니다 않습니다 모두 많은 SVG와 경험, 그리고 사람이 없습니다.

Answer 2

귀하의 문제를 완전히 이해했지만 자신감이 없습니다. 그러나 여기에 있습니다. 이동 text-indent:-1ex 사용에 대한

* { font-size: 72px } 
 
b { font-weight: normal; color: red; position: absolute; top: 52%;}

Te&#x0301;st <br/> 
 
Te<b>&#x0301;</b>st

Answer 3

이것은 해킹하지만 : 당신은 단순히 지금은 별도로 스타일입니다 올바른 위치로 돌아갑니다 악센트를해야하는 경우에는 비슷한을 적용 할 수 악센트는 1 문자 너비 뒤에 있습니다. http://jsfiddle.net/1tm1Lrrp/4/

어떤 경우에도 점이 여전히있을 수 있기 때문에 이러한 제안 사항 중 아무 것도 i와 작동하지 않습니다.

Answer 4

그래, 내가 부분적인 해결책을 찾은 것 같지만 조금 까다 롭다. 기본적으로,이 문자를 조합하여, 전체 문자를 렌더링해야하고 어떤 문자를 결합하지 않고 그 위에 다른 문자로 숨길 :

* { font-size: 72px } 
 
b { font-weight: normal; color: red; width: 0px; overflow: visible; display: inline-block; } 
 
i { font-style: normal; color: black; }

Te&#x0301;st <br/> 
 
T<b>e&#x0301;</b><i>e</i>st

불행하게도,이 빨간색 아주 약간의 제공 앤티 앨리어스가 적용될 때 기본 문자로 윤곽선을 그립니다.

그리고 특정 오버레이 문자 작동하지 않습니다. 이 예에서, 빨간색 막대 검은 d에 있어야합니다 :

* { font-size: 72px } 
 
b { font-weight: normal; color: red; width: 0px; overflow: visible; display: inline-block; } 
 
i { font-style: normal; color: black; }

d&#x336; <br/> 
 
<b>d&#x336;</b><i>d</i>