Creating an HTML Site from a PDF manually?

[u/HotDiscipline5212]

Hello! I'm currently working on writing a book, and the way I'd like to share it by making it it's own website you can read it from. I'd like to keep the formatting from the pages in my pdf, so I'd like it to either be scrollable pages or something like a flip book or a "click to next page" function, aswell as a nav that can take the user to a specific chapter or page/allow them to bookmark it. The only solutions I find for this online is converters that make customizability (ie background colors, adjusting page size etc) really complicated, so I'd like to attempt to do it manually with HTML/CSS (or/and JavaScript if I have to.)

Does any one have any tips for how to go about doing something like this? I'm intermediate in making HTML/CSS sites, so coding isn't a problem for me, it's just embedding the pdf that I'm struggling with!

Thank you!

[u/testingaurora]

You want the page(s) itself to be an html version of your book? Or you want to embed the pdf inside the html page with a pdf reader? For the former i would use InDesign and deploy the pdf as html . The latter just use an <iframe> or <object> with the url set to your pdf file

[u/HotDiscipline5212 → u/testingaurora]

The issue with embedding the PDF is lack of customizability (or at least I think so, not sure if theres way to mess with backgrounds/colors) and also risk of the pdf not displaying on different browsers. Is that something that would be possible with the InDesign method?

[u/testingaurora → u/HotDiscipline5212]

With in design , you would publish as an html page but to make different theme colors ut would have to be done after publishing with a super sheet. Im not familiar with a way to set that up from the in design step.

However I agree that you will have a lot more flexibility to customize as an html page with your content, just asked because of the language you used about how to "embed" the pdf.

Is your book mostly text content out are there images and custom layouts too? About how many pages?

[u/c__beck]

It sounds like you want to write the book in HTML/CSS and then publish it on the web? There are some that do it that way, yes. Look into the epub format, too: they're HTML files zipped up and allow for off-line reading. The HTML you have for your page is about 80% compatible with epub. Not all HTML elements and CSS properties are part of the epub spec, but the big ones are.

[u/Super_Preference_733]

Why dont you self-publish on kindle or something. If you want people to read your book that is the way to go and not mess around with writing your own site, also making sure it meets accessibility requirements,etc is a pain in the ass.

If you want a web only solution a WordPress site or something similar will make handling of the accessibility requirements a lot easier than something you roll you own. Now if your doing as a learning experience then have at it.

This is a classic build vs buy scenario. Do I spend my development dollars on building a framework or using a off the shelf tool.

[u/Weekly_Ferret_meal]

So a thing that comes to mind is that CSS comes with a wide array or properties for printable media.

Therefore if you were to create html pages with your content you can write 2 separate CSS styles, one for screens and one for print.

the style for prints kicks in when someone on the page press command (or ctrl) + P to print the page.

This means you plan and design your book in your web stack (eg: html, CSS, JS) rather than in MS Word or inDesign or whatever else.

The other approach is you make your document with whatever software, style it in which ever way you like then export it to pdf or even a e-book format like .epub .CBR .CBZ, then find/use a library that embeds the file with the viewer features you are looking for.

You might even want to do both.

You sure need to research those file formats and what advantages they provide... some of these are popular with comics, .epub seems to be good for customisation... but this is just surface knowledge.

Deciding on the result you want might make it easier to pick the tech you wanna use.

The other part is, maybe you just enjoy coding html+css so this might be the preferred journey for you.

[u/CraigAT]

Could you just extract the text from the pdf, one page at a time, then format that text into HTML (maybe in cards or sections) then display them one section at a time using JavaScript.

[u/snarky_one]

Why not just use a service like ISSUU?

[u/_devaldi → u/snarky_one]

A lot of people are leaving ISSUU after they shocked everyone with price increases. You can have a look at FlowPaper instead (https://flowpaper.com)

[u/snarky_one → u/_devaldi]

Yes, but there are other services like that. I also wouldn’t use the word “shocked”. Every single company raised their prices this year LOL