book/pdf with fastn #275

AviralVerma13 · 2022-07-22T13:35:14Z

AviralVerma13
Jul 22, 2022

We can add a functionality to add the header and footer in a doc at the top and bottom of a page.
it may contain the page number, chapter/book name, etc.
It may be used in writing a novel, report or book.

amitu · 2022-07-25T11:14:48Z

amitu
Jul 25, 2022
Maintainer

This is a going to be a little tricky. It will require us to have control over page-layouting.

0 replies

gsalunke · 2022-09-23T07:27:26Z

gsalunke
Sep 23, 2022

Though it's tricky but can be achieved via adding simple javascript event of window.print() on a button.

Few CSS tweaks required as shown in below example code. Above window.print() event can be triggered using OnClick in FTD button. Prerequisite window.print() function should work in below FTD code snippet:

-- ftd.text: Button
role: $fpm.type.fine-print
color: $fpm.color.main.text
background-color: $fpm.color.main.cta-primary.base
$on-click$: window.print()

Also, below CSS should be added into FTD:

@media print {
  button {
    display :none;
  }

}

Ref Demo:

https://codepen.io/vipul_patel_08/pen/zZxzBw

2 replies

amitu Sep 23, 2022
Maintainer

@gsalunke I do not see any header or footer in the linked Demo.

add the header and footer in a doc at the top and bottom of a every page

When printed. Can you share a PDF which is created using a HTML/CSS/JS that has multiple pages, and has same header/footer on all pages?

gsalunke Sep 23, 2022

@amitu sorry I was working on our custom html file. Please, copy below code into a .html and check output on browser. As of now its working in Chrome browser on Mac.

HTML Code

<!DOCTYPE html>
<html>
    <head>
        <style>
            footer {
            font-size: 9px;
            color: #f00;
            text-align: center;
            }
            @page {
            size: A4;
            margin: 11mm 17mm 17mm 17mm;
            }
            @media print {
            footer {
            position: fixed;
            bottom: 10px;
            padding-top: 20px;
            border-top: 1px solid #000;
            width:  100%;
            font-size: 14px;
            font-weight: bold;
            color:  green;
            }
            header {
            position: fixed;
            top: 10px;
            padding-bottom: 20px;
            border-bottom: 1px solid #000;
            width:  100%;
            font-size: 14px;
            font-weight: bold;
            color:  green;
            }
            .content-block, p {
            page-break-inside: avoid;
            }
            html, body {
            width: 210mm;
            height: 297mm;
            }
            }
            @media print {
            button {
            display :none;
            }
            }
            @page {
            size: auto;
            margin: 30px 30px 30px 30px;
            }
            @media print {
            footer {page-break-after: always;}
            }
        </style>
    </head>
    <body>
        <button style = "height : 40px;" onclick = "window.print()" > print this long page </button>
        <header>
            FifthTry Private Limited.
        </header>
        <h1 style="margin-top: 100px">
            Example Document
        </h1>
        <div>
            <p>
                This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
            </p>
        </div>
        <div>
            <h3>
                Example Section I
            </h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
                Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
                Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
                Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.
                Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
                Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
                Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
            </p>
        </div>
        <div class="content-block">
            <h3 style="padding-top: 100px;">Example Section II</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
                Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
            </p>
            <h3>Example Section III</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
                Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
            </p>
        </div>
        <footer>
            FifthTry Private Limited, Bengaluru.
        </footer>
    </body>
</html>

Output PDF:

printable-html.pdf

amitu · 2023-03-21T17:52:43Z

amitu
Mar 21, 2023
Maintainer

@Arpita-Jaiswal we should try this someday. I want our fastn book looking like this :-)

https://iangmcdowell.com/blog/posts/laying-out-a-book-with-css/

https://news.ycombinator.com/item?id=35242299

0 replies

amitu · 2023-11-12T02:16:04Z

amitu
Nov 12, 2023
Maintainer

https://news.ycombinator.com/item?id=38230453

0 replies

amitu · 2024-01-18T03:22:15Z

amitu
Jan 18, 2024
Maintainer

https://news.ycombinator.com/item?id=39027543

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fastn-stack

book/pdf with fastn #275

{{title}}

Replies: 5 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

fastn-stack

book/pdf with fastn #275

AviralVerma13 Jul 22, 2022

Replies: 5 comments · 2 replies

amitu Jul 25, 2022 Maintainer

gsalunke Sep 23, 2022

Ref Demo:

amitu Sep 23, 2022 Maintainer

gsalunke Sep 23, 2022

Output PDF:

amitu Mar 21, 2023 Maintainer

amitu Nov 12, 2023 Maintainer

amitu Jan 18, 2024 Maintainer

AviralVerma13
Jul 22, 2022

Replies: 5 comments 2 replies

amitu
Jul 25, 2022
Maintainer

gsalunke
Sep 23, 2022

amitu Sep 23, 2022
Maintainer

amitu
Mar 21, 2023
Maintainer

amitu
Nov 12, 2023
Maintainer

amitu
Jan 18, 2024
Maintainer