Opened 2 years ago

Last modified 5 weeks ago

#1997 assigned defect

I2P Website: Documentation Pages Poorly Formatted For Printing

Reported by: slumlord Owned by: sadie
Priority: maintenance Milestone: undecided
Component: www/i2p Version: 0.9.30
Keywords: print, website, documentation Cc: zzz
Parent Tickets: Sensitive: no

Description

I tried to print out some pages of I2P documentation from the website and the pages are really badly formatted for printing. Please see attached screenshot.

I believe some CSS changes would improve formatting for better readability on printed pages.

Subtickets

Attachments (1)

i2p.png (66.1 KB) - added by slumlord 2 years ago.
Screenshot of print preview

Download all attachments as: .zip

Change History (6)

Changed 2 years ago by slumlord

Attachment: i2p.png added

Screenshot of print preview

comment:1 Changed 2 years ago by slumlord

Version: 0.9.30

Useful resource:
http://edutechwiki.unige.ch/en/CSS_for_print_tutorial

—-

I am printing out some of the documentation, to do this I am converting the text to markdown. If anyone would like these markdown files, please let me know. You can find me on IRC2P.

Version 0, edited 2 years ago by slumlord (next)

comment:2 Changed 2 years ago by zzz

Owner: set to str4d
Status: newassigned

comment:3 Changed 13 months ago by slumlord

Shifted to LaTeX documentation due to complexity of documentation.
Draft will be shared publicly when ready for review & comments.

comment:4 Changed 2 months ago by zzz

Owner: changed from str4d to sadie

comment:5 Changed 5 weeks ago by idk

Applying the following CSS *after* all other CSS has been applied causes the text to appear "Wrapped" and to make use of the whole width of the page only when the page is being printed. This results in more readable pages and fewer overall printed pages.

@media print { div#content .aside {
    word-wrap: break-word;
    display: !important;
}}

@media print { div#content .inner .fluid {
    margin-right: 3%;
    display: !important;
}}

@media print { div#content .inner .meta {
    position: unset;
    left: unset;
    margin: unset;
    right: unset;
    text-align: unset;
    display: block !important;
}}

@media print { div#content .inner .sidebar {
    word-wrap: break-word;
    margin-right: 2%;
    display: !important;
}}

@media print { div#content .content-inner {
    margin-left: 3%;
    padding-right: 4em;
    display: !important;
}}

Note: See TracTickets for help on using tickets.