[tw] 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 <https://groups.google.com/forum/#!topic/tiddlywiki/EbTVXUrWss4>
(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

Post by @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

[@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

Post by Michael Wiktowy
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
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
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.

[Alex Hough]

Just a thought.....

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


Alex

Post by @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

Post by Michael Wiktowy
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
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
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
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
<https://groups.google.com/d/msgid/tiddlywiki/95d7328e-db95-4d4e-a782-e14010d428c1%40googlegroups.com?utm_medium=email&utm_source=footer>
.
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

Post by Alex Hough
Just a thought.....
I wonder if the plugin could be used to produce QR labels from the QR
function in TW
Alex

Post by @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

Post by Michael Wiktowy
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
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
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
<javascript:>.
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
<https://groups.google.com/d/msgid/tiddlywiki/95d7328e-db95-4d4e-a782-e14010d428c1%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[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

Post by 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

Post by Alex Hough
Just a thought.....
I wonder if the plugin could be used to produce QR labels from the QR
function in TW
Alex