Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

webcomic reader in html help?

A topic by klarip created Aug 21, 2022 Views: 594 Replies: 5
Viewing posts 1 to 3
(1 edit)

hello everyone! it's my first time asking for help in a forum omg. anyway. I am making a comic and I want to publish it here instead of other sites and I have zero programming knowledge and I wanted to make a reader tool for my comic so i can update it regularly. 

something like this

https://tuyoki.itch.io/soulbeacon or https://cecilbrews.itch.io/neselo

any tips? and thank you 

(+2)

I understand that you just need to create the html pages with the images and the hyperlink, make a .zip, upload it to itch and check the options it's an HTML game and can be played on the web.

If you don't know how to make the html pages. Searching the web I found this site that can be used to convert a PDF into html pages.

https://www.idrsolutions.com/online-pdf-to-html5-converter

thank you so much!!! i'll have this in mind 

Curious about the whole "don't want to publish to other sites." Licensing worrying you?

Anyway, hechelion's answer is the simplest. Go with it if you have the pdf created. The thing with comics is that a lot of the industry ones are published as pdfs, so there's no real usage for an HTML-conversion or separate player to go with them, when most of the providers would rather go "hey, the buyer has something they like for pdfs, let's let them use that." That's not withstanding specialized readers like Amazon or Hoopla that can zoom in on specific panels, but honestly if you're not looking into programming then that might be too much of a pain unless you want to meticulously comb through each page and define the panel size/location in some reference document, and even then that's too much effort for one comic.

Anyway, I'll go ahead and tell you how to replicate it from scratch, if for whatever reason hechelion's answer fails you.

No experience? No problem. Every page in Temmie's comic is using a very basic template. Each page has a centered image element for the comic page, a back/forward button with href set to the next page number (except page1.html, which links index.html for the title page), and a primitive ToC below. You know the basics of making a web page that can display an image and use an image for a link? You have the means to replicate that functionality, just copypaste it several dozen times and change each one to host a different page as well as link the previous/next.

The other one by Cecilbrews is a little more advanced, but that's mostly because it has a lot more of its navigation elements in a dropdown. At its core, it's basically the same thing, just not caring to break up each web page by image and instead by episode:

Inspect is your friend for figuring out how to work specific elements. Just take it element-by-element for learning; the iframe and associated document involve nesting html within html, so anything above that is just itch's page rather than the comic.

Anyway, dissertation aside, here's a very basic page layout that you can bum:

<html>

    <head><head>

    <body>

        <center>

            <a href="previousPage.html">Previous page text or image goes here</a>

            <a href="nextPage.html">Next page text or image goes here</a>

            <img src="COMIC_PAGE_1.jpg"/>

        </center>

    </body>

</html>

Replace the content in each a element's href tag and the img's src tags as needed for each specific page.

The biggest pain is going to be managing your image sizes, since you need to account for all readers. You're going to be dealing with desktop users besides mobile. So, if your panels/pages are smaller than a player, you might need to implement some size limitations (such as what Temmie's pages do). For this example, I just left it at an un-filtered size and made the test image so big that it doesn't matter.

End result:

Hope something in that rambling helps.