Referring to Shiraz Plugin Update 2.4.2 - Plugins - Talk TW (tiddlywiki.org) you can find here some more fun highlighting macros.
Screenshots
Realistic marker highlighter
Drop shadow highlighter
Code and demo
download highlighter-kookma.json (2.5 KB)
drag and drop downloaded JSON into https://tiddlywiki.com
open example tiddlers
See the two macros for realistic marker highlight hlm and drop shadow highlight hls.
I am thinking to prepare a Shiraz sub plugin contains text effects. Shiraz is now feature rich and a bit large (100kB).
1 Like
oeyoews
September 15, 2022, 3:06pm
2
Unfortunately, this style seems to be unsupported on ios again.I also did a similar thing a few days ago, like this
although shiraz is very powerful, but sometimes I always forget, after all, it has too much content for me (Maybe I’m being lazy)
Two CSS features are used: filter and drop-shadow.
As much as now, they are supported on ios. See
“drop-shadow” | Can I use… Support tables for HTML5, CSS3, etc
“filter” | Can I use… Support tables for HTML5, CSS3, etc
By the way I am on Windows, lets see other IOS user share their experiences for these.
oeyoews:
although shiraz is very powerful, but sometimes I always forget, after all, it has too much content for me
That is true, it has too much content. It is a small framework in itself.
Two pieces of feedback.
I think the macro should use the mark element instead of span to make the HTML semantically correct.
Second, the SVG filter in the CSS works with specific font sizes only. If you change the font size, the visual style does not scale.
Compare, font size 2em
with font size 4em.
The size and setting were set so that, the H1 shows the underline and other font sizes (smaller then H1: body text and all headings H2, H3, …) show only the marker effect. I assumed one accept the default font size in empty.html.
This is good idea! and yes, it is semantic. But there few cons. Each browser has factory setting for mark, and one has to reset all those seetings.
1 Like