Page media and Tiddlers

[TonyM]

In relation to View and Print tiddlers with page handling - help requested

I am looking at using the @page media in css. However being a css ignorant I am trying to work out how to use it

Specifically I want it to relate to content inside a tiddler. However most of the code out there relates to a whole html page.

Perhaps I need to wrap the text in a tiddler with a div that somehow specifies it is both display and print media, and to use the print css when printing.

I am particularly interested in defining a tiddler that uses the https://www.w3.org/TR/css-page-3/#margin-boxes margin boxes documented here, when printing but it would be nice to see the content on screen as well, a Kind of wisywig. 

I am building a view template that applies a style sheet that defines the @print media statement but I am hoping to transclude fields on the current tidder that contain either the content only or also some css to each "element", so I have a field called element-name and element-name-css in a tiddler.

@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom

After defining the whole page I want the body of the tiddler transcluded in the body of the page.

I am really at a loss how to do this. Especially when it comes to referring only to the current tiddler and not accidently the whole tiddlet wiki. To print I open the tiddler in new window and print from there.

Once this is working I will also transclude a field defining what html elements to use to throw a page break eg h1

Thanks in Advance

Tony

[Michael Wiktowy]

Hi Tony,

I attempted to make a label-maker-type tool that required precise control over margins and positioning of labels for printing. I had some success but in the end, it relied on setting particular (mostly zero) margins at the browser level which made it hard for me to deploy anywhere.

My conclusions were:

- Different browsers frustratingly handle print media CSS differently or ignore the settings completely

- There are a ton of little spots where padding creeps in to mess up your layout. I think that I zeroed most of them in my tool.

Regardless you can drag the Label Tool tag over to an empty tiddlywiki and dig around. I hope that something in the stylesheets there helps.

http://mwiktowy.tiddlyspot.com/#Label%20Tool%20-%20Main%20Menu

/Mike

[TonyM]

Thanks Michael

[@TiddlyTweeter]

Ciao Tony

I think this is a great topic.

I have tried to produce a precise mono-typed print layout for film scripts in the past with accurate page breaks.

I looked at the "Prince" specialised CSS based print system that is very informative about CSS & print media. You don't actually need to use it. Its just informative.

https://www.princexml.com/

I concluded there are three issues plus 1 ... 

    (a) figuring out what you need to "zero-out" in TW; (Telmiger's "Bricks" CSS design plugin is good for that)

    (b) coping with some variants between browsers (far less now than before, though).

UPDATE:

    (c) some printer dependent issues can come into play, especially on harmonising for the fixed non-printable gutters that can vary between them.

    (d) though (c) can be coped with through printing to PDF and auto-scaling the PDF to media size on print.

But I'm not there yet.

TT

[@TiddlyTweeter]

For those on email ... I update my last post: https://groups.google.com/d/msg/tiddlywiki/wXhrnhiV8Xg/N3TlGqQGDAAJ

[TonyM]

Josiah,

Thanks for your suggestions.

I realise I have a gap in my css knowledge here but ultimately I expect it to be both easy and flexible especially to a pdf file since as you suggest it provides a kind of standard printer. At the moment it seems I need to learn all about it so I can choose only what is needed.

Now I am trying to define the page because I am already confident with causing tables in the body to page break as needed and repeating headers.

The css available is all about printing whole of html pages rather than treating a tiddler as the page source. Page handling css seems to impact the whole wiki and there seems to be some gaps in tiddlywikis print action.

I must keep going.
Tony

[Sycom]

Hi Tony,

page media is not so well implemented in browsers i'm affraid.

I have a project with printing capabilities and have struggled with this. My workaround is using a footer tiddler
* the footer tiddler has display:none; for @screen view
* i'm using display: table-footer-group; for @print section

Might inspire you : https://know-rmandie.frama.io/TiddlyPAC/tiddlyPAC-Normandie.html#%24%3A%2Fpac%2Fstyles.css:%24%3A%2Fpac%2Fstyles.css%20styles_de_tiddlyPAC%20%5B%5BPorter%20%C3%A0%20Connaissance%5D%5D

works better in Firefox than Chrome though...

cheers,

Sylvain
@sycom

[Michael Wiktowy]

works better in Firefox than Chrome though...

Yes ... ironically, in Chrome, you can force things to print nicely when the CSS is uncooperative but all those manual interventions get in the way when you are trying to control printing from the page media CSS. Firefox seems to listen to more print CSS tweaking ... for better or worse.

/Mike

[TonyM]

Folks

I continue on this journey and have a basic approach established. Which I will publish sooner of later

• However there is reference to the CSS box model and specifically the @page model.
• If I knew how to leverage this I would be able to build pages with a higher level of sophistication including accessing page numbers and more.
• See this w3C Document Especially Table 1 Page-Margin Box Definitions

Can anyone give me even the simplex clue how you use this CSS box model and specifically the @page model.

I am slow close to being able to develop a fantastic page layout and printing tool, if anyone can give me a nudge?

Regards

Tony

[Mat]

Tony

 

Can anyone give me even the simplex clue how you use this CSS box model and specifically the @page model.

Google? It doesn't sound TW specific at all, or do I misunderstand your problem?

<:-)

[TonyM]

Mat

Google schmoogle. Its not helping so much. Also tiddlywiki is a html page its self so some css effects the whole page so I can't use the examples as I want to operate on the tiddler level. Eg with a html div.

Regards
Tony

[@TiddlyTweeter]

A big issue is getting precise practical information on steps to wanted print outcomes. The issue is that you have several levels of potential complexity (base HTML/CSS combo; browser interpolation; printer parameters). The browser side is much better than it was on cross-compliance, but its not perfect. AND the number of tech people needing precision in printing is actually far lower than struggling end-users, like, for instance, academics who often do. So explicit info that is practical is in fairly short supply.

IMO you have to get one step sorted at a time. BTW, personally I use PRINTER/PDF to always evaluate. I do not trust the screen on this, apart from PDF.

Best wishes

TT