Few Highlighting Macros

Tips & Tricks
#1

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

image
image1057Ă—682 25.6 KB

Drop shadow highlighter

image
image1052Ă—701 75.3 KB

Code and demo

  1. download highlighter-kookma.json (2.5 KB)

  2. drag and drop downloaded JSON into https://tiddlywiki.com

  3. 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
#2

Unfortunately, this style seems to be unsupported on ios again.I also did a similar thing a few days ago, like this

image
image1179Ă—938 55 KB

although shiraz is very powerful, but sometimes I always forget, after all, it has too much content for me (Maybe I’m being lazy）

#3

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.

That is true, it has too much content. It is a small framework in itself.

#4

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

1054Ă—126 31.4 KB

with font size 4em.

2020Ă—210 34.8 KB

#5

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