Web Page To PDF Using Chrome Browser

- MAIN TUTORIAL INDEX -

ON THIS PAGE:
  1. Trying it out...
  2. Converting Plain Text Directly To A PDF in Chrome
  3. Converting Plain Text to HTML 4
  4. Re: PDF Reader Popup Table of Contents

This is a simple way to convert web content or HTML formatted documents to PDF.

Chrome brower has a function in it's "Print" routine to print something you are seeing into a PDF rather than sending it to your printer. It's actually quite good and fairly simple to do. If you don't have Google Chrome as your browser you can download it HERE.

Trying it out...

- TUTORIAL INDEX - PAGE INDEX -

  • 1. Open a simple webpage in another tab on Google Chrome so you can switch back and forth to these directions if you need to.
  • 2. Go to the right hand top corner of the browser and click on the icon with three upright dots.
    Chrome1.jpg IMAGE
  • 3. A drop down will appear. Choose "Print."
  • 4. A large screen will appear with an image of the first page on the right and print options on the left. On the right of the item "Destination," click on the drop down and choose "Save as PDF." In all reality, the default settings will work and you can skip to item #7 BELOW but if you want to fine tune it, you can continue through items #5 and #6.
    Chrome2.jpg IMAGE
  • 5. You may also want to click on the down arrow of "More Settings" at the bottom and that will open a section on changing settings for size of print paper, etc. Printers in other countries may use a different printer paper size. Other paper sizes may also be helpful if you want the PDF to fit cell phones (I use A5 personally for that). If you use normal printer size the text will be VERY small on a phone.
    Chrome3.jpg IMAGE
  • 6. Other settings you may or may not want to change are "Margins" and "Options." Under "Margins," you can choose "Custom" and some margin lines will appear on the page image on the right if you hover with your mouse over it. You can click on the margin lines that appears to slowly move them to where you want it. A black box will appear near the margin lines telling you exactly what the margins are and as you move them as well. Under "Options," you may want to unclick the box for headers and footers as they only pertain to the webpage location, etc.
  • 7. Last but not least, go back up to the top and click on "Save." A box will appear allowing you to name the file something else and also choose where the file is to be located on your computer... Click on "Save" and you are done. Presto!
    Chrome4.jpg IMAGE

Converting Plain Text Directly To A PDF in Chrome

- TUTORIAL INDEX - PAGE INDEX -

Now if you want to avoid encoding the text into HTML as shown in the next section, the simplest thing to do if all you want to do is convert a plain text document (ie a Facebook post) into a PDF with absolutely no formatting is to copy the text and paste it into a plain text file that is -NOT- set to "Word Wrap" paragraphs around to the next line. (Word Wrap should be turned off ie in Notepad, etc). Each paragraph should look like a single line that goes off to the right off the text editor screen and a blank space placed between each paragraph or item (ie Title, Heading, lead line, etc.) The text will wrap around in Chrome and the PDF conversion so don't worry about this.

Google Chrome does not have an "Open File" option for some reason so it's going to be a bit of a trick to import your text file (.txt or .text) into the browser. You will need to place any HTML (Web) file in the same directory that you have the text file in or create one by simply renaming any text file (not the one you want to use) into a .html. Then open your file manager and go to that directory and click or DBL click on that .html file. If Chrome is not your default browser, you will have to right click on the file and use the "Open With" function in your file manager. (In Windows that is "Right-Click" => "Open With" => "Google Chrome"). Once the .html file comes up in Chrome, you can replace the name and file extension of that file with the plain text file you want to load into Chrome's URL Address bar. Hit enter (while the mouse is still in the bar) and the plain text file will come up on the screen in Chrome.

Use the above instructions to Print to PDF as normal. If you want a PDF that is more readable especially in phones, follow the instructions to change the paper size (I suggest A5). The default margins are set to a printer sized page which would be quite large on an ebook size page so also follow the directions to change the margins (especially left and right) to something like 1/2 inch.

If this is ie a Facebook post, the layout on the PDF will be basically what you see on the Facebook post. For this reason I recommend that you have the Title in all capital letters to distinguish it from the text. A single space between paragraphs is a must so they can be distinguished easily as well.

If you are not sure of the quality of what this produces, click HERE to see a small sample PDF that was made from a plain text Facebook post using Chrome's "Print to PDF."

Converting Plain Text to HTML 4

- TUTORIAL INDEX - PAGE INDEX -

Ok. Supposing you have for example a really hot post on Facebook and you want to make a PDF of it. Unfortunately, you cannot make plain text into a PDF with any formatted text in it (ie bold, italic, paragraphs justified, etc) in Google Chrome unless you convert it into another format like HTML (web page format). That can get complicated but if you just want to convert ie a FB post with no frills or fancies, I will give you some basics below that will work just fine even for a beginner. You can copy and paste this code into your plain text file to make it easier.

The other option is to input the text into one of the many online HTML editors available like "Online HTML Editor" which can also do a great job of it almost automatically. If you do use that, copy and paste the text into the left side, fine tune it, then copy and past the HTML output side that results on the right side into a plain text file and then follow the instructions to print it from the beginning of this file.

First of all copy [CNTRL-C] and paste [CNTRL-V] the plain text to a file in a plain text editor like Windows Notebook or better yet download a copy of Notepad++ which is hands down the best plain text editor in the world. Then save the file as a ".html"... Make sure your paragraphs, etc have a single empty space between them.

At the very top of the page copy and paste the following text into the file. I've replaced the things you need to fill in (replace) with -ITEM-. If there is an item that you don't want to fill in just leave the space between the quotes surrounding the -ITEM- blank. DO NOT REMOVE THE QUOTE MARKS!.

<html>
<head>
<title>-TITLE-</title>
<meta name="author" content="-AUTHOR-" />
<meta name="copyright" content="-COPYRIGHT-" />
<meta name="keywords" content="-KEYWORDS-" />
<meta name="description" content="-DESCRIPTION-" />
</head>
<body>
<font style="font-family: Arial, Helvetica, sans-serif;">

Next at the bottom of the page after the text (leave one space between), copy and paste the following lines.

</font>
</body>
</html>

Now if you want just a simple html formatted document, just above the first line, copy and paste the code: <P> (first line only) and after the last line, copy and paste the code: </P> (last line only). Now in between EACH paragraph in the empty line between them copy and past the code: </P><P> (NOTE: the "P" can be either upper or lower case) Now your text should look like the below:

<P>
This is paragraph or heading #1 (first)
</P><P>
This is paragraph or heading #2
</P><P>
This is paragraph or heading #3
</P><P>
This is paragraph or heading #4 (last)
</P>

Now you probably want a title so here's a little something you can do for that. Above the text, you can do this:

<h2 align='center'>A Title</h2>
<center>By Paul Rapoza</center>
<P>
This is paragraph or heading #1 (first)
</P><P>
This is paragraph or heading #2
</P><P>
This is paragraph or heading #3
</P><P>
This is paragraph or heading #4 (last)
</P>

There is something else you very likely will run into and that is a paragraph with some listed items below it. So we will add a few listed items below one of the paragraphs in our example and put the HTML code for a line break in front of them <br>:

<h2 align='center'>A Title</h2>
<center>By Paul Rapoza</center>
<P>
This is paragraph or heading #1 (first)
</P><P>
This is paragraph or heading #2
<br>Item number 1
<br>Item number 2
<br>Item number 3
</P><P>
This is paragraph or heading #3
</P><P>
This is paragraph or heading #4 (last)
</P>

Now there is something else that is not necessary but you may want to learn it to and that is highlighting some text with either BOLD, ITALICS or UNDERLINE. We will put the bold example in paragraph #1 and the italics in paragraph #3 and the underline in paragraph #4 in the word "paragraph":

<h2 align='center'>A Title</h2>
<center>By Paul Rapoza</center>
<P>
This is <b>paragraph</b> or heading #1 (first)
</P><P>
This is paragraph or heading #2
<br>Item number 1
<br>Item number 2
<br>Item number 3
</P><P>
This is <i>paragraph</i> or heading #3
</P><P>
This is <u>paragraph</u> or heading #4 (last)
</P>

So now we have our example text in the following HTML output:

A Title

By Paul Rapoza

This is paragraph or heading #1 (first)

This is paragraph or heading #2
Item number 1
Item number 2
Item number 3

This is paragraph or heading #3

This is paragraph or heading #4 (last)

Now save your file as an ".html" and then double click on it to bring it into Google Chrome if that is your default browser or right click on the file and choose "Open With" and then click on Google Chrome. When it comes up in your browser you can choose "Print" and "Save as PDF" as in the Google Chrome Print to PDF lesson at the TOP of this page.

Re: PDF Reader Popup Table of Contents

- TUTORIAL INDEX - PAGE INDEX -

If you have a larger document and want to include a popup table of contents or bookmarks that is actually easy to do by simply HTML coding them as Headings. as in our work example above but repeating them as below:

<h2 align='center'>Heading 1</h2>
<P>
Text of Paragraph
</P><P>
<h2 align='center'>Heading 2</h2>
<P>
Text of Paragraph
</P><P>
<h2 align='center'>Heading 3</h2>
<P>
Text of Paragraph
</P><P>

There is a catch though to doing this. In the text of your Heading there must -NOT- be any line breaks in that text or it will show up as two bookmark/TOC items instead of one. If the text wraps around to the next line that is ok but never have a line break in the text. ie "<BR>"

Unfortunately, at this time Print to PDF on Chrome will not pass these bookmarks/TOC items to the PDF but I am mentioning it here because you can import your HTML encoded file into the FREE program called "Calibre - Ebook Management" for Windows (32 and 64 bit), MacOS and Linux which is not a hard program to learn with some pointers. With a little configuration your bookmark/TOC items will show up well. You can learn more about that program "HERE."


- TUTORIAL INDEX - PAGE INDEX -