An option for highlighting text

Tips & Tricks
#1

Look what I just realized! Paste the following into a tiddler. You might want to play around with the width of the story river also:

So the text starts out with some unsignificant stuff of no importance. But then... <span class="encircle">this is the really important stuff inside the text that really needs highlighting in some way so it is encircled as if it was done with a marker pen! </span> And then then unimportant text can continue afterwards as if nothing happened.

<style>
.encircle {
 outline:5px solid #ff000080;
 outline-offset:2px;
 border-radius:50%;
}
</style>
3 Likes
#2

Riffing on that…

<good>So the text starts out with some insignificant stuff of no importance. But then... <bad>this is the really important stuff inside the text that really needs highlighting in some way so it is encircled as if it was done with a marker pen! </bad> And then then unimportant text can continue afterwards as if nothing happened.</good>

<style>
bad {
 outline:1px solid #d14;
 outline-offset:-2px;
 border-radius:5px
}
bad:before {
content: "&nbsp;X&nbsp;";
color:#d14;
}
good {
 outline:1px solid #0a0;
 outline-offset:-2px;
 border-radius:5px
}
good:before {
content: "&nbsp;&#10003;&nbsp;";
color:#0a0;
}

</style>
4 Likes