TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Perfect Edition: A lightweight, responsive web e-book template

248 pointsby catacombsalmost 5 years ago

23 comments

heydenberkalmost 5 years ago
The author (of both the book in the demo and this software itself) is Robin Sloan. He publishes a couple email newsletters, all of which I recommend. Most recently he&#x27;s been writing a development diary for a video game he&#x27;s working on[0]. He published a handful of GPT-2 generated city descriptions based on a corpus of fantasy literature that was a lot of fun[1]. There&#x27;s great content about the illustration style as well[2]. I recommend the follow.<p>[0] <a href="https:&#x2F;&#x2F;www.robinsloan.com&#x2F;overworld&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.robinsloan.com&#x2F;overworld&#x2F;</a> [1] <a href="https:&#x2F;&#x2F;www.robinsloan.com&#x2F;overworld&#x2F;week&#x2F;5&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.robinsloan.com&#x2F;overworld&#x2F;week&#x2F;5&#x2F;</a> [2] <a href="https:&#x2F;&#x2F;www.robinsloan.com&#x2F;overworld&#x2F;week&#x2F;3&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.robinsloan.com&#x2F;overworld&#x2F;week&#x2F;3&#x2F;</a>
评论 #23980943 未加载
michaelmrosealmost 5 years ago
Several issues from viewing <a href="https:&#x2F;&#x2F;robinsloan.github.io&#x2F;perfect-edition&#x2F;build&#x2F;web&#x2F;" rel="nofollow">https:&#x2F;&#x2F;robinsloan.github.io&#x2F;perfect-edition&#x2F;build&#x2F;web&#x2F;</a><p>- Having the pages you can&#x27;t actually read on each side is distracting and wastes a ton of horizontal space.<p>- Moving the browser window to a different monitor with a different resolution can result in you being stuck half way between pages and needing to scroll to reset positioning. Resizing has the same effect. Anything that changes the window size should probably do a better job of resetting position. Its an interesting question as to where the page should reflow to but it seems like it would be optimal if the newly flowed page started at the same position.<p>- When scrolling by touch on my touchscreen laptop there is a fair bit of inertia when flicking it hard and not much at all when moving it lightly making it easy to end up not exactly centered. Given that you actually can&#x27;t read it that way and nobody on planet earth is trying to end up halfway it should be hard to end up in that condition. It ought to snap the rest of the way if you scroll it part of the way to the next page. Where the threshold to end up on the prior page and the threshold to end up on the next is, is another question just don&#x27;t let it end up halfway!
评论 #23983330 未加载
vngzsalmost 5 years ago
If you open most books on the shelf you will notice that text is not left-aligned, but is in fact justified to create a consistent vertical margin on the right-hand side[0]. It&#x27;s the big thing I always miss when I try reading on the web.<p>One way to do this is with JavaScript implementations of the LaTeX hyphenation&#x2F;justification algorithm. Check out [1] and [2] for examples.<p>[0]: <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;65ICUVW.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;65ICUVW.png</a><p>[1]: <a href="https:&#x2F;&#x2F;github.com&#x2F;robertknight&#x2F;tex-linebreak" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;robertknight&#x2F;tex-linebreak</a><p>[2]: <a href="https:&#x2F;&#x2F;github.com&#x2F;bramstein&#x2F;typeset" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;bramstein&#x2F;typeset</a>
评论 #23982602 未加载
评论 #23979963 未加载
评论 #23994342 未加载
评论 #23994391 未加载
greatgibalmost 5 years ago
The work is nicely done.<p>But each time I see a website presenting a book content or catalog in pages like that, like if it was a real book, it really pisses me off.<p>It is a design move that goes against ergonomy.<p>Harder&#x2F;slower to browser, harder&#x2F;slower to seek, you have to do a mental break while pages are changing with effect that does not get the same efficiency feeling than a real book.
评论 #23979492 未加载
评论 #23980522 未加载
评论 #23982540 未加载
评论 #23979407 未加载
评论 #23981465 未加载
评论 #23979397 未加载
throwaway413almost 5 years ago
Nice! I recently built something similar, but less longform:<p><a href="https:&#x2F;&#x2F;booklitapp.com" rel="nofollow">https:&#x2F;&#x2F;booklitapp.com</a><p>(The demo on the homepage is swipeable on mobile and draggable on desktop.)<p>My goal was to be mobile-first. One thing I haven&#x27;t added yet is a table of contents generator - I like how you have the TOC toggle at the bottom!
评论 #23982782 未加载
评论 #23980046 未加载
wencalmost 5 years ago
Just had some feedback about the demo: I noticed chapter headings were being underlined (anchor links).<p>I wonder if I might persuade the layout editor that the aesthetics would be improved if the underlining was removed?<p>Underlining is a holdover from the days of typewriters, and considered unaesthetic in professional typesetting [1, 2]. It&#x27;s really only done in scripts, manuscripts and other non-published documents.<p>[1] <a href="https:&#x2F;&#x2F;practicaltypography.com&#x2F;underlining.html" rel="nofollow">https:&#x2F;&#x2F;practicaltypography.com&#x2F;underlining.html</a><p>[2] <a href="https:&#x2F;&#x2F;writing.stackexchange.com&#x2F;questions&#x2F;4674&#x2F;is-emphasizing-a-point-by-underlining-still-appropriate" rel="nofollow">https:&#x2F;&#x2F;writing.stackexchange.com&#x2F;questions&#x2F;4674&#x2F;is-emphasiz...</a>
评论 #23980087 未加载
评论 #23979602 未加载
chrisfinazzoalmost 5 years ago
This is nice, but I&#x27;d still like to find a no frills, to-the-point explainer on how to assemble an epub from standard tools. After all, it&#x27;s really just a zip archive with a couple directories and some specially named files.<p>All of the tutorials I find are either woefully out of date - usually they can&#x27;t create valid EPUB3 content, require stupid software like Java due to epubcheck, or just punt the whole issue to something like Calibre, Sigil, or worse, InDesign.<p>Have no actual, working programmers - save for John Siracusa - ever seen an epub file?<p>&#x2F;rant
评论 #23982183 未加载
评论 #23983257 未加载
评论 #23982408 未加载
yingw787almost 5 years ago
Nice! Not sure if you&#x27;re looking for feedback, but I had two interesting observations:<p>1. Ctrl + back arrow (to go back to previous webpage) doesn&#x27;t work, I think there&#x27;s a redirect loop to the primary index.html page (easy enough to go around)<p>2. Zoom in&#x2F;out doesn&#x27;t resize the selector, instead the window stays the same size while the text changes, and some part of the previous&#x2F;next page are in focus (not a big deal).<p>Looks really cool, thank you for sharing!
Shankalmost 5 years ago
I really would appreciate more sites trying to copy the Holloway reader (seen in the equity compensation guide here: <a href="https:&#x2F;&#x2F;www.holloway.com&#x2F;g&#x2F;equity-compensation" rel="nofollow">https:&#x2F;&#x2F;www.holloway.com&#x2F;g&#x2F;equity-compensation</a>. The most ideal readers have things like interactive tables of contents, a huge focus on typography, in-line citations and organization. Books on the web should take full advantage of the web without going overboard on javascript -- it&#x27;s totally possible but this format is almost never used.
评论 #23984541 未加载
jm_lalmost 5 years ago
I did something similar using Github pages (no serverside stuff needed) for an e-zine I recently published. Hopefully removing the server-side component makes it easier for other creators:<p>The zine is here: <a href="https:&#x2F;&#x2F;jminjie.github.io&#x2F;zine&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jminjie.github.io&#x2F;zine&#x2F;</a><p>And you can see the repo here <a href="https:&#x2F;&#x2F;github.com&#x2F;jminjie&#x2F;zine" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jminjie&#x2F;zine</a>
评论 #23981258 未加载
thomascgalvinalmost 5 years ago
This is very cool.<p>Can the artifacts generated in `build` be served as static content? EG can I just upload it to a website, rather than running the ruby server?
评论 #23979029 未加载
limomiumalmost 5 years ago
Has the slowest scrolling by wheel I&#x27;ve ever seen. I scroll and scroll and watch the next page inch over for an eternity.
young_unixeralmost 5 years ago
I&#x27;ve given up on reading epubs on my computer. All epub readers are crap: inappropiate fonts, weird spacing, no sheet margins (like the ones pdf readers have), etc.<p>PDFs, on the other hand, look nice 95% of the time, unless someone uses calibre to convert an epub to pdf.
评论 #23983266 未加载
评论 #23994442 未加载
Shorelalmost 5 years ago
I really like the e-book template used for the rust book.<p><a href="https:&#x2F;&#x2F;doc.rust-lang.org&#x2F;book&#x2F;ch01-01-installation.html" rel="nofollow">https:&#x2F;&#x2F;doc.rust-lang.org&#x2F;book&#x2F;ch01-01-installation.html</a>
jetgirlalmost 5 years ago
Very nice, my scroll wheel makes it go really slow but that is probably an issue on my end.
评论 #23980423 未加载
kurizu4444almost 5 years ago
Love this idea, are you looking for open source help?
Koshkinalmost 5 years ago
This is great. It is indeed the web browser that should be seen today as <i>the</i> e-book reader (among other things).
krmmalikalmost 5 years ago
I would pay for an out of the box version of this with a bookmark feature. I am an author that can&#x27;t code. Help
评论 #23980181 未加载
yobananaboyalmost 5 years ago
I think it&#x27;s really interesting that it&#x27;s hard to find exactly what the meaning of &quot;Perfect Edition&quot; is in the English internet. I was curious about what it means in the manga world, and all I can guess at is that it&#x27;s multiple manga issues bundled into one hardcover book printed on glossy paper. Anyone know anything else (or more accurate) about the etymology of the term?
stakkuralmost 5 years ago
It looks nice, but--am I and my friends the only ones that never read a long-form book in a web browser?
评论 #23979792 未加载
bovermyeralmost 5 years ago
I love this and will use it.<p>I also love one of the lines of text in the slider image:<p>&quot;The burrito cannons blared at noon&quot;
评论 #23978538 未加载
chrismorganalmost 5 years ago
I deem that almost all of the value of pagination on most devices¹ is in <i>static</i> pagination: that you can refer to things by page numbers, that it helps your memory, things like that.<p>I am a Christian and read my Bible daily, and I know just where on the page a great many things that I might look for, which helps me to find them rapidly when I don’t remember the chapter and verse. In the not-too-distant past (say, 1800–2010), those people that cared about the Bible would mostly have a primary Bible that they used, and would get such advantages from; but increasingly people shift to using software Bibles, and Bible software is uniformly <i>terrible</i> for being one’s primary Bible. (Uniformly; there does not exist any software that is not terrible for this purpose.) I have thought long and hard about these problems, and have software in mind that, combined with the right hardware (which has to start with a high-resolution tablet with pen), could make a decent primary Bible. Operating <i>primarily</i> by static pagination (trying to pick the best features of the digital and paper worlds) will be an important part of this. It remains to be seen just how well spatial memory will work once the pages are not physically embodied; to my mind that’ll be the greatest hazard, and define whether I can switch to it myself.<p>To be sure, operating solely by static pagination in software is challenging: what do you do if you don’t have a known static device size? Shrink everything down tiny so that it’s not readable? Have done multiple columns on the page so that you can show just a <i>column</i> at a time? (That may be a possibility with Bibles which are commonly two columns per A5-or-not-much-larger page, but it’s not common outside Bibles.) Most commonly it’ll be better to give up on the pagination. So such static pagination is the sort of thing that Kindle can do to a large extent, but a general-purpose ebook that might be viewed on a phone, a laptop, <i>&amp;c.</i> really can’t. Any reference materials like textbooks that are presented in PDF form for its static pagination will tend to cause at least some pain in matters of page sizing, and they’ll normally be accessed with vertical scrolling of pages rather than attempting to emulate a paper book too closely.<p>But other than when you have static pagination, on the aforementioned “most devices”, pagination is fairly strongly inferior to scrolling in its experience. For starters, you’re replacing a well-understood and consistently-implemented primitive with something that’s just… <i>different</i>. Different is normally bad. Different is even more normally badly implemented.<p>This project is going for pagination without static pagination. I think that’s a terrible mistake given how people interact with most works that might be framed in this thing (that is: mostly works of fiction that people will typically want to read from start to end). Its implementation is seriously dodgy: Shift+Space, Home, End, Page Up and Page Down don’t work. Scrolling with a wheel is just completely wrong and breaks the pagination model into smithereens.² Panning with touch breaks the pagination model into as many smithereens again. Swiping from outside the portrait page area doesn’t work at all.<p>To correct the final sentence on the first page of the demo:<p>Basically, nothing works properly.<p>Horizontal pagination like this is simply a poor fit for the web (and is very tricky to get right, or as close as you can to right, on general-purpose OSes).<p>But props on handling the no-JS case pretty well. :)<p>———<p>¹ “Most devices” means “devices that can handle scrolling well”, which means approximately any device with a high-speed display (such as an LCD or OLED display, and typically excluding e-ink displays) and some form of rapid and relatively precise means of scrolling (e.g. touchscreen panning, or a touchpad with scrolling, or to a very slightly lesser extent Space&#x2F;Shift+Space&#x2F;arrow navigation, so long as the user knows about them, and depressingly many don’t; ugh, the times I’ve seen people slowly move the mouse cursor across to the scroll bar with the ill-calibrated touch pad that they don’t realise offers two-finger scrolling, and click and drag the scrollbar thumb to scroll the page). For devices that <i>don’t</i> handle scrolling well, such as most e-paper reader devices, pagination has rather more obvious benefits.<p>² As an aside, it’s fundamentally impossible to implement scrolling fully correctly on top of a paginated source on the web, firstly because there’s no such thing as correct—users will want and prefer different things, all of them between hard and impossible—and secondly because hardware varies too much so that any attempts to make dual-axis scrolling work on the web <i>will</i> fail smoothness tests at the very least, and typically fail much more than that; and attempts to do things like scroll snapping to pages will irritate at the very least a substantial fraction of your users because it messes with their declared intent, and hardware varies enough in what it supports and reports in scrolling that it’s very impossible to do well for everyone. Outside the web platform you can do better on both these points, but general-purpose perfection is still pretty much unobtainable due to input hardware variation.
评论 #23980029 未加载
dangalmost 5 years ago
I tried the demo: <a href="https:&#x2F;&#x2F;robinsloan.github.io&#x2F;perfect-edition&#x2F;build&#x2F;web&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;robinsloan.github.io&#x2F;perfect-edition&#x2F;build&#x2F;web&#x2F;index...</a>. It&#x27;s very nice.<p>Since I was using the space key to page forward, it would be nice if shift+space would page backward (by analogy with scrolling up and down on mac os).