I’m looking to update an old walkthrough. It includes a map (an image) and some things arranged in tables. I still have the word processing document that I used to make the PDF.
I don’t mind PDF format, but it seems like some people don’t like it. I’m wondering if a different format (like HTML) would be better.
It might be nice to allow viewing the solution for just one puzzle at a time. Maybe using details tags in HTML.
It seems like HTML changes over time. Is it a concern that HTML features could become obsolete? I’m also not sure what all the rules are about HTML documents, but maybe I could automatically convert the file?
Maybe another option would be to put the walkthrough in a plain text file, and make it a separate file from the map.
I think it’s reasonable to assume that html will be supported and/or backwards-compatible for a very, very long time. It’s also easy to pick apart an html file and get the plaintext even if by some unfortunate circumstance compatibility is broken.
Details tags work very nicely for hints/walkthroughs, that’s the approach I’ve used for my own materials.
I prefer HTML, personally, because my browser can decide where to break lines based on my screen size and zoom level. With a PDF, zooming in often means a lot of scrolling back and forth.
With an HTML walkthrough that has a map, I guess you’d be dealing with at least two files (the html and the map image) and maybe an image folder. I’m not sure how best to arrange that.
Or at that point should the map just be a separate thing (a PDF?) and not be integrated into the walkthrough?
A folder is a decent way of doing it. It’s also possible (but kinda tricky) to embed images directly in HTML files using data: URLs.
The easiest way to make them is in Google Chrome. You first make the HTML the normal way, with an <img src="map.jpg"> tag, then you open the HTML in Google Chrome, then:
Right-click the image choose “Inspect Element”
Refresh the page
Right-click the image’s URL (the cursor will turn into a hand) and choose “Reveal in Sources panel”
Right-click the image in the Sources Panel and choose “Copy image as Data URI”
Change the <img src="map.jpg"> to <img src="data:...">, pasting in the URL you copied in the previous step.
When you refresh the page, you’ll see the map in your HTML, and the HTML will be much larger (bigger than your original image), but now you’ll have just one HTML file to distribute instead of a folder.
As for your earlier question: PDFs are an extremely stable format, but they’re not resizable. They’re going to be exactly the page size you picked, which may or may not be easy to read on mobile.
HTML is almost as stable (since 2005-ish, browsers now go to great effort to preserve pixel-perfect backwards compatibility), but they support resizing. That’s mostly good, but it can look bad if someone tries to use your HTML in a size that you hadn’t planned. As long as you’re using ordinary paragraphs and lists (the sort of things the forum can do), you’re unlikely to run into trouble with screen sizes for any text you write.
You may or may not care whether your map “looks good” on a portrait mobile screen. (If the map itself is landscape, that make be impossible-ish to achieve.)
Perhaps I’m a bit archaic, but I prefer good ol’ ASCII for walkthroughs and a graphic file for maps (.png format are good, and beside, is the web standard for pictures along .jpg format)
on .html, I 'fess that I fooled around a bit with the admittely crazy idea “twine-as-hint/walktrough 'terp” but I don’t have figured a good layout…
Plain text. No fancy formatting required. No browser required. No special tools required. It can be opened in a separate window adjacent to the game and it works with screen readers for the visually-impaired.
With Pandoc writing to HTML output, you can use the --embed-resources option to automatically convert images to data URIs, so that the single HTML file contains all necessary information in itself. You probably also want to use the --standalone option.
Produce a standalone HTML file with no external dependencies, using data: URIs to incorporate the contents of linked scripts, stylesheets, images, and videos. The resulting file should be “self-contained,” in the sense that it needs no external files and no net access to be displayed properly by a browser. This option works only with HTML output formats…
By the way, there’s a web version of Pandoc at https://pandoc.org/app/. --embed-resources is on the “Format-specific” tab. --standalone is checked by default on the “General” tab.