91 lines
3.5 KiB
HTML
91 lines
3.5 KiB
HTML
<!doctype html>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<style>
|
|
body {
|
|
font-size: 24px;
|
|
}
|
|
|
|
div {
|
|
border: solid;
|
|
width: 360px;
|
|
float: left;
|
|
margin: 8px;
|
|
}
|
|
|
|
span::selection {
|
|
background-color: brown;
|
|
color: yellow;
|
|
}
|
|
|
|
#special-span::selection {
|
|
-webkit-text-emphasis-color: lightgreen;
|
|
}
|
|
</style>
|
|
<div>
|
|
Lorem ipsum dolor sit amet,
|
|
<span style="-webkit-text-emphasis: '@ignored';">consectetur adipiscing</span>
|
|
elit. Aliquam
|
|
<span style="-webkit-text-emphasis: '*'; -webkit-text-emphasis-position: under;">odio sapien</span>,
|
|
lobortis eu iaculis vel, scelerisque nec dolor.
|
|
</div>
|
|
|
|
<div style="text-rendering: optimizelegibility;">
|
|
Lorem ipsum dolor sit amet,
|
|
<span style="-webkit-text-emphasis: '@';">consectetur adipiscing</span>
|
|
elit. Aliquam
|
|
<span style="-webkit-text-emphasis: '*does not matter'; -webkit-text-emphasis-position: under;">odio sàpien</span>,
|
|
lobortis eu iaculis vel, scelerisque nec dolor.
|
|
</div>
|
|
|
|
<div>
|
|
Lorem <span style="-webkit-text-emphasis: filled red;">ipsum</span>
|
|
<span style="-webkit-text-emphasis: open green;">dolor</span>
|
|
<span style="-webkit-text-emphasis: circle;">sit</span>
|
|
<span style="-webkit-text-emphasis: dot;">amet</span>,
|
|
<span style="-webkit-text-emphasis: double-circle;">consectetur</span>
|
|
<span style="-webkit-text-emphasis: sesame;">adipiscing</span>
|
|
<span style="-webkit-text-emphasis: triangle;">elit</span>.
|
|
|
|
<span style="-webkit-text-emphasis: open dot;">Aliquam</span>,
|
|
<span style="-webkit-text-emphasis: open double-circle;">odio</span>
|
|
<span style="-webkit-text-emphasis: open sesame;">sapien</span>,
|
|
<span style="-webkit-text-emphasis: open triangle;">lobortis</span>
|
|
eu iaculis vel, scelerisque nec dolor.
|
|
</div>
|
|
|
|
<div style="-webkit-writing-mode: horizontal-bt;">
|
|
Lorem <span style="-webkit-text-emphasis: filled red;">ipsum</span>
|
|
<span style="-webkit-text-emphasis: open green;">dolor</span>
|
|
<span style="-webkit-text-emphasis: circle;">sit</span>
|
|
<span style="-webkit-text-emphasis: dot;">amet</span>,
|
|
<span style="-webkit-text-emphasis: double-circle;">consectetur</span>
|
|
<span style="-webkit-text-emphasis: sesame;">adipiscing</span>
|
|
<span style="-webkit-text-emphasis: triangle;">elit</span>.
|
|
|
|
<span style="-webkit-text-emphasis: open dot;">Aliquam</span>,
|
|
<span style="-webkit-text-emphasis: open double-circle;">odio</span>
|
|
<span style="-webkit-text-emphasis: open sesame;">sapien</span>,
|
|
<span style="-webkit-text-emphasis: open triangle;">lobortis</span>
|
|
eu iaculis vel, scelerisque nec dolor.
|
|
</div>
|
|
|
|
<div style="line-height: 2;">
|
|
Lorem ipsum dolor sit amet,
|
|
<span style="-webkit-text-emphasis: '@';">consectetur adipiscing</span>
|
|
elit. Aliquam
|
|
<span style="-webkit-text-emphasis: '*'; -webkit-text-emphasis-position: under;">odio sapien</span>,
|
|
lobortis eu iaculis vel, scelerisque nec dolor.
|
|
</div>
|
|
|
|
<div>
|
|
Lorem ipsum dolor sit amet,
|
|
<span id="first-span" style="-webkit-text-emphasis: '@';">consectetur adipiscing</span>
|
|
elit. Aliquam
|
|
<span id="special-span" style="-webkit-text-emphasis: '*'; -webkit-text-emphasis-position: under;">odio sapien</span>,
|
|
lobortis eu iaculis vel, scelerisque nec dolor.
|
|
</div>
|
|
|
|
<script>
|
|
getSelection().setBaseAndExtent(document.getElementById("first-span").firstChild, 10, document.getElementById("special-span").firstChild, 7);
|
|
</script>
|