Opened 2 years ago

Last modified 8 days 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:

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 (add)

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

Screenshot of print preview

comment:1 Changed 2 years ago by slumlord

  • Version set to 0.9.30

Useful resource:

(clearnet link) 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.

Last edited 2 years ago by slumlord (previous) (diff)

comment:2 Changed 2 years ago by zzz

  • Owner set to str4d
  • Status changed from new to assigned

comment:3 Changed 12 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 5 weeks ago by zzz

  • Owner changed from str4d to sadie

comment:5 Changed 8 days ago by eyedeekay

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.