| <!doctype html> |
| <meta charset="utf-8"> |
| <link rel="author" name="Delan Azabani" href="mailto:[email protected]"> |
| <link rel="stylesheet" href="support/highlights.css"> |
| <style> |
| * { |
| text-decoration-skip-ink: none; |
| text-decoration-skip: none; |
| } |
| main { |
| font-size: 7em; |
| margin: 0.5em; |
| width: min-content; |
| } |
| .unselected { |
| text-decoration: #E03838C0 wavy underline; |
| color: #C0C000C0; |
| } |
| .selected { |
| background: #38E038C0; |
| text-decoration: #3838E0C0 wavy underline; |
| } |
| .selected, .selected * { |
| color: #3838E0C0; |
| } |
| .selection { |
| text-decoration: #663399C0 wavy line-through; |
| } |
| </style> |
| <!-- |
| In this ref, two wavy lines appear to be painted, with one |
| spanning the selected part and one spanning the whole text. The |
| latter changes color where selected and unselected meet. |
| --> |
| <main class="highlight_reftest"> |
| <div class="hrt_layers"> |
| <!-- |
| While the selection starts from the very first letter, we |
| still include a layer for the left unselected part, just |
| in case the wavy line has a long tip like in Blink. |
| --> |
| <div><span class="unselected">quick</span></div> |
| <div><span class="hrt_cover">quick</span>quick</div> |
| <div><span class="hrt_hider"><div><span class="selected">quick</span></div>quick</span></div> |
| <div><span class="hrt_cover">ck</span>quick</div> |
| <div>qui<span class="hrt_hider"><span class="unselected">quick</span>ck</span></div> |
| <div><span class="selection">qui</span>ck</div> |
| quick |
| </div> |
| </main> |
