Introducing: Label Tool (and dblist)

[Michael Wiktowy]

Greetings all,

I just wanted to share some TiddlyWiki tools I put together (with more to come). You can find them at:
http://sextant.tiddlyspot.com/

The first is a Label Tool. This is my attempt at a label tool that can serve as a conference badge/mailing label/tent card/business card generator. It started off as a quick a dirty attempt at making a label maker using TiddlyWiki and snow-balled from there. There are certainly things that can be added but it is in a functional state so far.

The second (that is used in Label Tool) is the dblist macro. Long ago, at the dawn of time, I started using Stephan Hradek's excellent Newtiddler Widget (and the Contact List Example he put together with it) before TiddlyWiki had the appropriate core functionality. It was very versatile for any kind of database list functionality but it became cumbersome to keep copying/cloning/editing all the constituent pieces when I wanted to reuse it elsewhere.

So I refactored Stephen's tool to make the dblist macro that only used stock widgets and can be reused just by cloning and renaming a few tiddlers with optional editing to suit. Many improvements can still be made but it is usable so far. You can easily change the look of the dblist (as I have done with the Label Tool) but it is still a manual process.

Please use them and offer constructive feedback. I don't guarantee time to make large improvements but I hope to refine things over time.

Enjoy,

/Mike

[@TiddlyTweeter]

The Label tool got my interest in that its trying to deal with the somewhat complicated problem of getting printers to behave using CSS. This is important if you need to strictly control print layouts.

I'm not sure its entirely successful as a generalisable approach. But its a hell of a lot better and illustrative than most anything I have seen in TW so far. Must have been a lot of work?

FYI, a useful resource on learning about and addressing print issues from HTML pages in a CSS driven way is the PRINCE system https://www.princexml.com/. Prince aims to bring to utilisation of CSS for document printing exact, cross-browser repeatable layout.

Best wishes
Josiah

[Michael Wiktowy]

Indeed. During my troubleshooting, I did run across a bunch of print layout engines using CSS as the input and PDF as the output but I wanted it to be strictly browser-based. I have tested in with Chrome and Firefox on Linux and Chrome on Windows (the target for my original use-case) but am interested in how it works with other people's browser/OS configurations.

Some of the issues that I ran into:
1) All the little margins and padding that get placed everywhere even though you have not specified anything and it is just an "unprintable" and "undisplayed" whitespace in the html drove me nuts. It isn't. Mostly solved by setting font size and line heights to zero on the containing elements and then resetting them to the size you want where you want them. Sometimes solved in a case by case basis by html commenting out whitespace. It weirdly works.

2) Also, there is a little bit of margin around the html body element that causes a weird margin at the top (screwing up your pagination on the first page only) and at the end (giving you an random extra page on templates that fill up the top to bottom space like tent cards). I had to force that to zero in the @media print rule.

3) @page rule is a wonderful concept for printing that is largely ignored in Chrome. Chrome depends on manual print page margin setting which makes it great for over-riding crappy print layouts but makes it impossible to make things completely automatic. I got to the point where only the top margin setting is needed and the rest should be zero. If you set all the manual margins to zero in Firefox, the @page top margin is respected and things line up automatically. I wanted to fake this using and n-up layout within TiddlyWiki but could not figure out how or if it can process n list items at a time.

4) I would have liked to have some automatic resizing/scaling of fonts to fit each unit div but apparently that does not exist unless you hack it up by iterating with javascript which is beyond my skill-set. My first attempt as squeezing text in was to use the "condensed" version of a font but whether the font that a browser chooses has a condensed variant is hit or miss even with the same font-family specification. I ended up just squeezing by changing the font size on the line that was assumed the biggest but what is done with that checkmark is template specific. This might turn into a slider or a +/- button in the future to allow some fine tuning.

Anyways, thanks for checking it out.

/Mike

[@TiddlyTweeter]

Ciao Mike

Thanks for the detailed comments! They are useful to read. 

The area of accurate printing via CSS I think has quite a lot of "exception handling" you have to deal with. Your comments illustrate that well.

I'm pretty sure its like that because, still, when browsers adopt new CSS rules, there is hardly any assessment of final printed output on testing the implementation. Its an area of CSS that has great potential--but is weak and inconsistent as soon as you start trying to create reliable precision.

One advantage of printing to PDF, rather than printer, is its a way around some of the current problems. I assume that is why its used so widely?

Best wishes
Josiah

[Alex Hough]

Just a thought.....

I wonder if the plugin could be used to produce QR labels from the QR function in TW

Alex

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/95d7328e-db95-4d4e-a782-e14010d428c1%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Michael Wiktowy]

Absolutely! I already have some working code (based on the examples in the plugin) to produce MECard or VCard Contact QRs to plug into a page template. I just didn't want to include functionality from a pre-release plugin. Once 5.1.16 is released, I will add it in.

I'll post the template code here a bit later if you are interested.

/Mike

On Tuesday, March 20, 2018 at 8:30:10 AM UTC-4, AlexHough wrote:

Just a thought.....

I wonder if the plugin could be used to produce QR labels from the QR function in TW

Alex

On 18 March 2018 at 12:39, @TiddlyTweeter <tiddly...@assays.tv> wrote:

Ciao Mike

Thanks for the detailed comments! They are useful to read. 

The area of accurate printing via CSS I think has quite a lot of "exception handling" you have to deal with. Your comments illustrate that well.

I'm pretty sure its like that because, still, when browsers adopt new CSS rules, there is hardly any assessment of final printed output on testing the implementation. Its an area of CSS that has great potential--but is weak and inconsistent as soon as you start trying to create reliable precision.

One advantage of printing to PDF, rather than printer, is its a way around some of the current problems. I assume that is why its used so widely?

Best wishes
Josiah

Michael Wiktowy wrote:

Some of the issues that I ran into:
1) All the little margins and padding that get placed everywhere even though you have not specified anything and it is just an "unprintable" and "undisplayed" whitespace in the html drove me nuts. It isn't. Mostly solved by setting font size and line heights to zero on the containing elements and then resetting them to the size you want where you want them. Sometimes solved in a case by case basis by html commenting out whitespace. It weirdly works.

2) Also, there is a little bit of margin around the html body element that causes a weird margin at the top (screwing up your pagination on the first page only) and at the end (giving you an random extra page on templates that fill up the top to bottom space like tent cards). I had to force that to zero in the @media print rule.

3) @page rule is a wonderful concept for printing that is largely ignored in Chrome. Chrome depends on manual print page margin setting which makes it great for over-riding crappy print layouts but makes it impossible to make things completely automatic. I got to the point where only the top margin setting is needed and the rest should be zero. If you set all the manual margins to zero in Firefox, the @page top margin is respected and things line up automatically. I wanted to fake this using and n-up layout within TiddlyWiki but could not figure out how or if it can process n list items at a time.

4) I would have liked to have some automatic resizing/scaling of fonts to fit each unit div but apparently that does not exist unless you hack it up by iterating with javascript which is beyond my skill-set. My first attempt as squeezing text in was to use the "condensed" version of a font but whether the font that a browser chooses has a condensed variant is hit or miss even with the same font-family specification. I ended up just squeezing by changing the font size on the line that was assumed the biggest but what is done with that checkmark is template specific. This might turn into a slider or a +/- button in the future to allow some fine tuning.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

[Michael Wiktowy]

Here is the code for a VCard template:

\define qr_vcard_contact(firstname,lastname,org,tel,email)
<img src=<<makeqr text:"""BEGIN:VCARD
VERSION:3.0
N:$lastname$;$firstname$
ORG:$org$
TEL:$tel$
EMAIL:$email$
END:VCARD""" size:"200" errorCorrectLevel:"L" >>/>
\end

<$macrocall $name="qr_vcard_contact" firstname={{!!first_name}} lastname={{!!last_name}} org={{!!organization}} tel={{!!telephone}} email={{!!email}}/>

and for a MECard Template (slightly more compact syntax so less complex resulting QR). The ORG field is a bit off-spec but seems to work ... in Android at least.

\define qr_mecard_contact(firstname,lastname,org,tel,email)
<img src=<<makeqr text:"""MECARD:N:$lastname$,$firstname$;ORG:$org$;TEL:$tel$;EMAIL:$email$;;""" size:"200" errorCorrectLevel:"L" >>/>
\end

<$macrocall $name="qr_mecard_contact" firstname={{!!first_name}} lastname={{!!last_name}} org={{!!organization}} tel={{!!telephone}} email={{!!email}}/>

You can cram an address in there but the resulting QRCode gets a bit dense/large.

Also the "L" error correct level (7% loss tolerant) was used to make the code smaller.

Enjoy,
/Mike