How to convert a Google document into a presentation with CSS

published Oct 10, 2016 05:40   by admin ( last modified Oct 10, 2016 05:43 )

This trick uses pure CSS to make a Google document into a PDF slide presentation. Just export the doc to HTML and paste in the CSS code below.

What you will get

  • Title, heading 1 and heading 2 will be kept, and so will bulleted lists
  • Pretty much everything else gets hidden.
  • Each of title, heading 1 or heading 2 starts a new slide.
  • There will be a logo placed above each slide heading.

How to do it

Export your document to HTML

Open the HTML document and remove the style element inside the head element

Paste this style element in instead (it assumes your logo is in images/image00.png)

    <style type="text/css">
    p {
        display: none;
    }
    
    body {
        font-family: sans-serif;
    }
    
    p.title {
        display: block;
        font-weight: bold;
        font-size: 48px
    }
    
    
    @media print {
        h1,
        h2 {
            page-break-before: always;
            padding-top: 40mm
        }
        h1 {
            font-size: 42px
        }
        h2 {
            font-size: 36px
        }
        h1,
        h2 {
            background-image: url('./images/image00.png');
            background-repeat: no-repeat;
            background-position: left top
        }
    }
    </style>

 

Open the html file in e.g. Google Chrome

Open print dialog

Make sure "Background graphics" is ticked if you are using Google Chrome

Print to PDF

Open PDF in PDF viewer

Choose Presentation mode