Printing A Tiddler

[Jon Light]

In response to a slight offtopic on the thread "Issue with PrintRiver plugin" I thought it was worth mentioning other methods of printing Tiddlers.

I took a fairly simple approach as follows.

• I simply find the tiddler of interest and use the existing Tool item PRINT.
• This prints the whole page which equates to the story river
  
• I therefore use the pull down from the Tiddler menu "Close Others" now I have only one tiddler in the Story River - then I print - very quick and fuss free as long as you like the existing defaults on what actually gets printed.
  

Its an easy sequence.

Subsequent "fussy" refinements....

I preferred to print tags with tiddler so my custom CSS contains @media statements for printer specific CSS which include making tags in the tiddler visible for the print.

I also like to use CSS floats to place text to one side of the other of images, the problem is that page breaks and images are difficult when printing.

The browser may make the decision to move an image to the next side of paper but still allows the floated text that should appear alongside the image to appear instead on the previous side - kind of ignoring that the image got bumped to the next page.

I added extra CSS to my Custom CSS tiddler for this situation

@media print { blockquote.CLEARP { page-break-after: always; } }

@media screen { blockquote.CLEARP { clear: both; display:block; border: 0px solid #ddd; }}

This means when I preview the print out I can add blockquotes with class CLEARP to force a new page for the printed version. - crude but it works ok, I only use floats in tiddler articles over which I have lavished a bit of Tender Loving Care so I am happy to spend the time preparing the print in these cases.

I must revisit the PrintRiver Plugin sometime - I parted company with it because the problems I experienced with reveal before a kind soul on this forum suggested I use the detail tag.

[David Bakin]

I also print one or more specific tiddlers this way. 

A request:  sounds like you know what you're doing w.r.t. CSS and TW.  Would you mind making your full custom CSS available as an example (for me)?

-- David 

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1006b5a2-5d6d-44c8-909c-0a5d8d043e4dn%40googlegroups.com.

[Mat]

Tip:

Toolbar > More > Open tiddler in new window

Right click > Print

That said, I wish there was a direct "print this tiddler" button in the tiddler toolbar.

<:-)

[TW Tones]

I follow Mats method as well.

However I often create a tiddler (that may include the content of multiple tiddlers) that I then open in new window and print. Your could think of this as a print preview.

I think more sophisticate print preparation and layouts could be done in a custom tiddler, I would like to see the ability to preview (at least automatic page breaks) and insert additional ones as desired. Some one with good print media css skills may know how to achieve this. In effect we need a WYSISWIG print view that will work once presented to the print driver. Of course page size and other elements need to be maintained. We use A4 pages not letter in Australia, but preparing a cheat sheet on Landscape A3 may be nice.

Are there Print Preview javascript libraries we could use to build a plugin? I can see naming tiddlers for headings footers, previewing tables breaking across pages and visualising automatic page breaks, or inserting additional manual breaks.

It would also be nice to have a button to print that opens the "in wiki print preview", and another button that does the equivalent of Open in new window + ctrl-p 

Perhaps a nice approach would be to have a third template along with the edit and view called print preview that could operate on any tiddler.

Regards

Tones

[David Gifford]

I am waiting for the day when we can do 3D printing of tiddlers.

[TW Tones]

Post script

Of late I have being exploring "printing" to file, without page breaks to create documents with "infinite scroll". The best method I have found so far is generating html and exporting that. Although I would like an infinite page length in PDF files I have not established how to do that yet.

It seems to me there would exist tools to print preview html and customise before printing. So we should be able to leverage existing technology. Options may include actual PDF tiddler or file generation ie HTML - > PDF in wiki.

I just want to add I have played a lot in this space, generating PDF's from tiddlers for distribution from a wiki in a business. The page handling was the main issue.

David - Perhaps including a 3D diagramming tool would be a good start.

Regards

Tony

[Jon Light]

Hi David

Actually my Custom CSS tiddler is a mess because its in a constant state of experimentation and flux - however I certainly don't mind sharing it with you.

See the following post on a custom CSS tiddler https://tiddlywiki.narkive.com/uckGnsam/tw-custom-stylesheet

My basic pattern of use is that I use the blockquote to do just about any customisation to a block, there are other ways to do this...

https://tiddlywiki.com/static/Styles%2520and%2520Classes%2520in%2520WikiText.html

... but I have got used to using my mouse to select the text I want to do some styling on and so I prefer to "customise/over ride/abuse" the blockquote, if you are more

of a keyboard person you may prefer the method in the link above. I say abuse because my use of blockquote is not  restricted to quotes so perhaps I think of it as "blockstyle" where the default is a quote.

I try and pick short class names I will not forget, the whole point of this is for me is that it is supposed to be quick and easy - I use upper case for class names so they stand out.

So I use my mouse to select the text ( often a few paragraphs in my case ) and get the following after clicking on the blockquote tool on the tiddler menu.

<<<
Here is my paragraph of text or perhaps an image
<<<

I then add my custom class

<<<.XX
Here is my paragraph of text or perhaps an image with CSS class XX applied
<<<

Here is my full Custom CSS as you requested

====================================

Do note that it is just thrown together so not intended to be neat or tidy, once I have achieved something that does what I want I tend

to just go with it, I guess one day I might tidy and clean but I am still working out what I actually want to see so as long as the CSS works I go

with it.

Of course some of these choices (colours for instance) reflect choices I made in the Tiddlywiki options menus so they will most likely

clash or look odd in another TW where different choices were made. 

It works on Firefox which is the browser I always use - you might find some bits don't work on another browser or an older version

of Firefox - again I coded the CSS for private use so I was never bothered if it worked on Edge or Opera etc.

___________________________

 /* the following provides a custom quote-block which is intended for my annotations to someone else's writing - ie 'notes' within quotes */

blockquote.JL { margin-left: 0px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);

border-radius: 2px;

border: 1px solid #ddd;

padding-left: 1rem;

padding-right: 1rem;

margin-bottom: 3rem;

color:#777; }

/* not currently used maybe useful one day  */

blockquote.JL::before { content: ""; }

/* for mobile size adjustments */

@media screen and (max-width: 600px)

{ .tc-tiddler-controls button svg,

  .tc-tiddler-controls button img { height: 0.45em !important; width: 0.65em !important; }

  .tc-titlebar h2 { font-size: 0.8em !important; line-height: 1.0em !important; } }

/*changed my mind on this currently not used - on reflection I think I like the border so allow TD defaults to apply */

/*I have added class Q to all blockquotes that otherwise have no custom class so un-comment this to change default quotes everywhere */

/*blockquote.Q { margin-left: 0.5rem; border: 0px solid #ddd; margin-left: 0px; color:#555; }*/

/* used to centre text */

blockquote.CT { text-align: center; border: 0px solid #ddd; }

/* used to float left / right an image that is placed in a quote */

blockquote.FL { float: left !important; border: 0px solid #ddd; }

blockquote.FR { float: right !important; border: 0px solid #ddd; }

/* normal float clear is not much use for print outs - page breaks !! */

blockquote.CLEAR { clear: both; display:block; border: 0px solid #ddd; }

/* Attempt to gain some control on floats for printing - substitute the usual clear both by page-break-after 'always' */

@media print { blockquote.CLEARP { page-break-after: always; } }

@media screen { blockquote.CLEARP { clear: both; display:block; border: 0px solid #ddd; } }

/* add clear-fix to tiddler body to support floats otherwise if image height is greater than surrounding container it will overflow */

.tc-tiddler-body { overflow: auto; }

/* customisation of details widget for more details button */

details { background-color: #fff ! important; }

details summary { background-color:#fff ! important; }

details { padding: 0 0.5em 0 0.0em ! important; }

details > summary { margin: 0 -0.5em 0 0.0em ! important;

padding: 0.2em 0.5em 0.2em 0.0em ! important;

padding-left: 0em ! important;

text-indent: 0em ! important;

color:purple ! important; }

details[open] > summary { color:purple ! important; }

/* I would like tags to be printed when I print out a tiddler but not the more details 'button' - well its not really a button!   */

/* display 'block' is used here to over-ride display 'none' */

/* these should be combined into one block */

@media print {.tc-tags-wrapper {display: block ! important;}}

@media print {.tc-btn-invisible {display: block ! important;}}

@media print { details[open] > summary { display: none; }}

/* custom HR  */

.tc-tiddler-body hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); margin-top:2.0rem; margin-bottom:2.0rem;}

/* all links the same colour not interested in distinction whether internal or external link - just visited for now */

a.tc-tiddlylink-external:visited { color: #5778d8 !important; }

[Jon Light]

Hi David

I should add that I added to my /*comments*/ in places so whilst the above CSS was cut and paste from something that does work it is always possible

that I messed up with the additional comments which I added whilst editing the post - if something does not work try removing the comments first or look for an error in the comments.

[Jon Light]

Hi Mat

"Toolbar > More > Open tiddler in new window"

For me that results in a tiddler in a new window but minus the tiddler title which I usually want.

I did not pursue it since I had the other option "close all other tiddlers" to hand - following path of least resistance !

A quick check on the underlying HTML in the new window suggests that the title is absent not merely "CSS-non-displayed" - its simply not there - intention? bug? limitation? I don't know.

Just flagging this difference in behaviour for interested parties.

Jon

[Steph Butera]

For me, the "Toolbar > More > Open tiddler in new window" opens a new window that is completely blank. I'm hoping the PrintRiver add-on, or some other add-on solution, will be developed by one of this kind souls in this community!

Steph

[TW Tones]

Steph,

If you rely on the view template to display tiddlers it may not be displayed when viewing the tiddler in a new window, which only wikifies the text field. 

I have made but not formally published open in window for view and edit in new window. I have attached it

Have a look inside and you may find what you are looking for.

I have to start packing to move house :) :(

Tones

[Steph Butera]

Wowee. Thank you Tones! It's perfect.

Wishing you a good landing at your new place.

Steph