✨ IMPROVE: Styling print to pdf #438

AakashGfude · 2021-12-09T22:31:41Z

The following PR aims to change the structure and styling of single page documents when printing using "Print to PDF" functionality of jb. It primarily relies on two css classes for defining structure(showing, hiding elements from the dom) - onlyprint and noprint.

Output from this PR looks like this:

Store code outputs and insert into content.pdf

The above document's content is from https://jupyterbook.org/content/executable/output-insert.html

Will keep updating the output picture and document here, as we push more changes.

EDIT 1: increased the width content, and handled margin directive as shown in the pic above.
cc: @rowanc1 @damianavila @mmcky

mmcky · 2021-12-09T22:38:32Z

thanks @AakashGfude the new single-page formatting looks nice and a lot less like a "printed" webpage.

The link to the pdf doesn;t seem to work - just FYI.

…ook-theme into pdf-styling

AakashGfude · 2021-12-09T22:45:39Z

The link to the pdf doesn;t seem to work - just FYI.

Thanks @mmcky , should be working now.

mmcky · 2021-12-09T22:52:05Z

Just some thoughts:

might it be possible to add an "option" to turn off "margin notes". (in the theme) They often aren't essential to the thread of a page and it might be nice to use the full width of the page.
Can we remove "Print to PDF"?

AakashGfude · 2021-12-09T23:00:52Z

Just some thoughts:

might it be possible to add an "option" to turn off "margin notes". (in the theme) They often aren't essential to the thread of a page and it might be nice to use the full width of the page.

Good idea. We can also style the margin to include it in the main content instead of in the side, and stylize it in a way to make it look like a note?

Can we remove "Print to PDF"?

Working on this.

AakashGfude · 2021-12-10T01:00:28Z

Can we remove "Print to PDF"?

It seems like as long as there is a title tag on the button:

<button type="button" id="download-print" class="btn btn-secondary topbarbtn" title="{{ translate('Print to PDF') }}"
            onClick="window.print()" data-toggle="tooltip" data-placement="left">.pdf</button>

the print to PDF is stuck in the pdf output.

Even trying to detach the window.print() function from button tag does not help:

<a href="javascript:printPage()"><button type="button" id="download-print" class="btn btn-secondary topbarbtn noprint" title="{{ translate('Print to PDF') }}"
                data-toggle="tooltip" data-placement="left">.pdf</button></a>

Here, printPage calls the window.print() function.

AakashGfude · 2021-12-10T06:40:53Z

One more drawback is that background-color property is not shown unless clicking the checkbox of background graphics .

Ex:
(Left: on, Right: off)

choldgraf

This is a nice improvement! I have a few thoughts in there about simplifying the codebase a little bit, but in general I think this is close.

The "print to PDF" thing is annoying, though already present in the theme (I didn't notice that before), so I don't think it should block this PR. Though @AakashGfude if you can figure out how to avoid it, that would be fantastic. Note that I believe this is using bootstrap-native tooltips, so maybe those docs will have helpful pointers: https://getbootstrap.com/docs/4.0/components/tooltips/

choldgraf · 2021-12-11T00:37:25Z

sphinx_book_theme/layout.html

@@ -20,7 +20,25 @@
 <main class="col py-md-3 pl-md-4 bd-content overflow-auto" role="main">
    {% block docs_body %}
    {% include "topbar.html" %}
-    <div id="main-content" class="row">
+    <h1 class="onlyprint">{{ pagetitle }}</h1>


Why don't we just wrap all of this in a div like <div id="jb-print-wrapper" class="onlyprint">? I feel like that'd be the most obvious to understand and then we only need one onlyprint in there

If this were the case, could we just put the TOC code:

https://github.com/executablebooks/sphinx-book-theme/blob/master/sphinx_book_theme/topbar.html#L21-L34

in a standalone html file, and then import it there and here, so we don't repeat ourselves?

@choldgraf there is a bit of difference in classes between the toc in print and non-print.

choldgraf · 2021-12-11T00:38:52Z

sphinx_book_theme/layout.html

+            <div>
+                <h2> {{ translate(theme_toc_title) }} </h2>
+            </div>
+            <nav aria-label="Page">


we probably don't need aria labels and such because this is being printed to PDF, so screen readers won't make sense, right?

@choldgraf these lectures, I reckon, can also be just downloaded as PDF and read on a computer or tablet offline instead of printing it in particular? In which case, screen readers would be important. Not sure, if this HTML tag translates to pdf output as well though.

I'm not sure either - but if we think it might help folks with a11y issues, let's just leave it in!

AakashGfude · 2021-12-13T10:39:17Z

Note that I believe this is using bootstrap-native tooltips, so maybe those docs will have helpful pointers: https://getbootstrap.com/docs/4.0/components/tooltips/

Thank you @choldgraf for the link. Though I could not find any resource to remove it in a boostrapy way. But I did get the element ids. I am detaching them from the DOM just before calling window.print() and then reattaching them again for HTML. A bit hacky but works nicely. Have updated the description image.

choldgraf

Just a couple quick comments, this looks nice!

sphinx_book_theme/layout.html

choldgraf · 2021-12-13T18:14:49Z

sphinx_book_theme/layout.html

+            </div>
+        </div>
+    </div>
+    <div id="main-content" class="row noprint">


I'm confused - wouldn't this mean that the whole #main-content div doesn't show up when printing?

This #main-content won't, but this one will https://github.com/executablebooks/sphinx-book-theme/pull/438/files#diff-6cf877d43a0155d9e3706cb22f143f326d4283458bfdcac93017b197c4f02e2bR27 . Looking at this now, i should rename the id of onlyprint one to something else, as there are two main-content ids at one time in this page.

or maybe convert main-content to a class name instead of id ?

hmmm - it seems reasonable to use a unique ID for the print-only header. That seems like a smaller change than converting it from an ID to a class, IMO

Fair enough. Changed them to individual ids.

Co-authored-by: Chris Holdgraf <choldgraf@gmail.com>

…ook-theme into pdf-styling

AakashGfude · 2021-12-15T22:43:36Z

@choldgraf this looks ready to go I think, if there are no further comments.

choldgraf

I lost track of this one, but thanks @AakashGfude for the improvements! Let's iterate in subsequent PRs if we find other improvements to make.

AakashGfude added 2 commits December 10, 2021 09:21

styling print to pdf

d880925

Merge branch 'master' into pdf-styling

bde9a77

AakashGfude requested a review from choldgraf December 9, 2021 22:31

Merge branch 'master' into pdf-styling

7acdc0e

AakashGfude added 2 commits December 10, 2021 09:43

updating test file

d0825d1

Merge branch 'pdf-styling' of https://github.com/AakashGfude/sphinx-b…

0d16352

…ook-theme into pdf-styling

changing margin direvtive style and playing with print to PDF button

22915a2

choldgraf reviewed Dec 11, 2021

View reviewed changes

AakashGfude added 2 commits December 13, 2021 09:29

wrapping div docs body

23f3908

handling tooltip text for pdf

ec5af5d

choldgraf reviewed Dec 13, 2021

View reviewed changes

AakashGfude and others added 9 commits December 14, 2021 12:53

Update sphinx_book_theme/layout.html

807ede5

Co-authored-by: Chris Holdgraf <choldgraf@gmail.com>

cant use this inside function

0c2d05c

Merge branch 'pdf-styling' of https://github.com/AakashGfude/sphinx-b…

9b5e489

…ook-theme into pdf-styling

duplicate onlyprint in main-content

07e089a

container div removed for footer

caa5fbd

main-content turned to class

a707641

Merge branch 'master' into pdf-styling

aa7f946

main-content to ids

ae2e98f

Merge branch 'pdf-styling' of https://github.com/AakashGfude/sphinx-b…

4f6cc16

…ook-theme into pdf-styling

choldgraf approved these changes Dec 26, 2021

View reviewed changes

choldgraf merged commit 37f0e35 into executablebooks:master Dec 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ IMPROVE: Styling print to pdf #438

✨ IMPROVE: Styling print to pdf #438

AakashGfude commented Dec 9, 2021 •

edited

Loading

mmcky commented Dec 9, 2021

AakashGfude commented Dec 9, 2021

mmcky commented Dec 9, 2021

AakashGfude commented Dec 9, 2021 •

edited

Loading

AakashGfude commented Dec 10, 2021

AakashGfude commented Dec 10, 2021

choldgraf left a comment

choldgraf Dec 11, 2021

choldgraf Dec 11, 2021

AakashGfude Dec 12, 2021

choldgraf Dec 11, 2021

AakashGfude Dec 12, 2021

choldgraf Dec 15, 2021

AakashGfude commented Dec 13, 2021 •

edited

Loading

choldgraf left a comment

choldgraf Dec 13, 2021

AakashGfude Dec 14, 2021

AakashGfude Dec 14, 2021 •

edited

Loading

choldgraf Dec 15, 2021

AakashGfude Dec 15, 2021

AakashGfude commented Dec 15, 2021 •

edited

Loading

choldgraf left a comment

✨ IMPROVE: Styling print to pdf #438

✨ IMPROVE: Styling print to pdf #438

Conversation

AakashGfude commented Dec 9, 2021 • edited Loading

mmcky commented Dec 9, 2021

AakashGfude commented Dec 9, 2021

mmcky commented Dec 9, 2021

AakashGfude commented Dec 9, 2021 • edited Loading

AakashGfude commented Dec 10, 2021

AakashGfude commented Dec 10, 2021

choldgraf left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AakashGfude commented Dec 13, 2021 • edited Loading

choldgraf left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AakashGfude Dec 14, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AakashGfude commented Dec 15, 2021 • edited Loading

choldgraf left a comment

Choose a reason for hiding this comment

AakashGfude commented Dec 9, 2021 •

edited

Loading

AakashGfude commented Dec 9, 2021 •

edited

Loading

AakashGfude commented Dec 13, 2021 •

edited

Loading

AakashGfude Dec 14, 2021 •

edited

Loading

AakashGfude commented Dec 15, 2021 •

edited

Loading