Scrolled (webtoon) layouts now scroll single-finger drags manually, the
same path paginated layouts always used: the browser's native touch
scrolling — and its fling momentum — is suppressed so the full gesture
stream stays observable to hosts. The reader's chrome UX (bookhoard
handoff item 7) classifies vertical flicks from that stream: flick-down
reveals, down/up dismisses. Side-swipes in paginated layouts and drags
in scrolled ones both page/scroll exactly as before, minus momentum.
Release behavior in scrolled layouts is stop-where-released — no snap,
deliberately: webtoon panels don't align to screen boundaries and a
snap would fight zoomed panning. Long jumps stay the position UI's
job. Pinch zoom, multi-touch, and active touch selection keep their
native behavior via the existing guards (they return before the
preventDefault). Desktop wheel scrolling is untouched.
Version 0.5.4.
TextLayer appends into the container without clearing it, so any
re-render of the same page doc (zoom settle, spread-scale update)
stacked a second span set at sub-pixel-shifted positions — selection
text reads doubled. Clear the container (stale spans + previous
endOfContent helper) before each TextLayer render.
Second member of the 50f56ee guard family: the scroll-anchor tick
(#afterScroll) can run before the iframe document is parsed, throwing
'createTreeWalker' on null body. getVisibleRange now returns null for
that tick and #afterScroll preserves the previous visibility state.
Observed live in the Android app on PalmDOC open.
A queued resize tick can run against a not-yet-parsed or unloaded
iframe; documentElement is null then and expand() threw inside the
ResizeObserver callback. Observed live in the Android app (twice in
row during boot and page turns). Follows the 50f56ee guard family.
rtf.js: a minimal single-pass RTF tokenizer extracting document text
with paragraph structure — groups, control words with signed params,
\\'hh Windows-1252 escapes, \\uN unicode with \\ucN fallback skipping,
known text destinations skipped whole (fonttbl/colortbl/stylesheet/
info/headers/pict/field/...), spec-required ignoring of unknown words.
Format runs are intentionally not converted; RTF is read as styled
text like .txt.
pdb.js: the TEXt/REAd PalmDOC container (PalmDOC, TealDoc) — the PDB
record reader and LZ77 decompressor are shared from mobi.js (both
exported; upstream already carried the TODO for this path). Records
decode as Windows-1252 and feed the plain-text pipeline (paragraph
split, line join, ~150KB sectioning, Part N TOC).
makeBook dispatch: content-based (TEXtREAd magic at offset 60;
'{\\rtf' magic), after MOBI and before the text branch.
Tests: node harness covering store + compressed PalmDOC, RTF paragraphs
/escapes/unicode/hex/destination-skipping, makeBook routing; txt/docx
regression suites pass.
The ResizeObserver can fire while the iframe document is still unset:
setImageSize dereferenced doc.body unconditionally and
setStylesImportant destructure-crashed on null, killing the render
loop — the view then never snapped or relocated again (observed in an
embedded Android WebView where the first observation lands pre-load).
Guard both paths.
makeDocxBook: the docx blob goes straight to mammoth.convertToHtml
(mammoth unzips internally; the browser entry takes {arrayBuffer}, the
node entry {buffer}). Converted HTML is sectioned at block-element
boundaries into ~150KB chunks (string-level — no DOMParser), giving a
Part N TOC; images inline as data URIs by default.
makeBook: zip files whose entries contain word/document.xml route to
the docx branch before the EPUB fallback (previously they died inside
new EPUB(...) on the missing container.xml).
mammoth is the fork's first runtime dependency: updates and security
fixes flow via semver; the browser-field mappings swap its node unzip
for the browser one; the dynamic import keeps it out of every other
format's path.
makeTextBook: UTF-8 decode (BOM stripped), blank-line paragraph split,
hard-wrapped lines joined (natural reflow under font-size changes), HTML
escaped, sections capped at ~150KB at paragraph boundaries (small Part N
TOC, avoids one giant DOM). Sections expose load/createDocument/size per
the reflowable interface; positions for txt books are percentage-based
(sections get fake CFIs from index, same as other non-EPUB books).
makeBook: dispatches text/plain or .txt in the final non-zip/non-pdf
branch. EPUB/PDF/CBZ/MOBI/FB2 routing untouched.
Tests: offline node harness (isText, paragraph join/split, escaping,
section capping, TOC shape, dispatch incl. zip-still-routes-to-EPUB).
Desktop counterpart of the existing touch double-tap: at fit scale a
double-click zooms to 2.5x at the clicked location; zoomed or panned it
resets to 100% centered. Page iframes forward dblclick with converted
coordinates and real targets; PDF text-layer spans and annotation links
keep native double-click (word selection) in select/text modes. Applies
to all fixed-layout content (comics, manga, PDFs, fixed EPUBs).
npm's cache reuse keyed on name@version (stuck at 0.0.0) silently served
stale tarballs to Docker builds; bumping on every deploy-worthy change
forces fresh resolution.
Mobile browser toolbar transitions change the viewport height by a
fraction mid-gesture; re-rendering the PDF for that races with
active text selections and can blank the canvas (the old canvas is
cleared for the re-render, and the async pdf.js render can fail or
get interrupted by the next resize). Only re-render for real layout
changes — same threshold as the paginator.
The gesture classifier only checked whether the touch STARTED on a
.textLayer span. Chromium's long-press selects the nearest word even
when the finger landed between spans (on the .textLayer div, not a
span inside it), so the classifier saw a non-selectable target and
classified the drag as swipe/pan — preventDefault on the iframe's
touchmove then cancelled the native selection extension mid-drag
and could blank the PDF canvas. If any frame already has a
non-collapsed selection, the drag is extending it.
A tap goes through #onTouchEnd's snap, which emits a no-op
relocate; readers treat any relocate as a page turn and dismiss
popovers, so the highlight edit popover opened by the tap's
synthetic click was immediately hidden.
touchstart's preventDefault suppresses the click events that
foliate's link handling and the overlayer's highlight hit-testing
depend on; dispatch one at the tapped element so internal links
and the highlight edit popover work on touch as on desktop.
Chromium's native touch selection cannot be used in the columned
layout: quick taps select words, the word iterator re-anchors at
page boundaries (jumping to other pages), and the browser
auto-scrolls the container when selections cross pages.
preventDefault on touchstart disables it; long-press selects the
word under the finger, drag extends word by word clamped to the
visible page, and pan/snap stand down while a selection gesture is
active. Native rendering still paints the selection.
Mobile browser toolbar transitions change the viewport height by a
fraction mid-gesture; re-rendering for them re-wraps the whole book
and reads as a page refresh. Re-render only for width changes or
height changes of 25% or more.
The custom gesture system and the selection clamp/repair chain
replaced browser behavior with worse approximations. Keep only the
non-touch gate on selection auto-paging (de70103), which fixes
drag-selecting paging away mid-gesture; everything else returns to
upstream behavior.
Chrome's native touch selection misbehaves in the paginated column
layout: quick taps select words, and dragging from a line-start word
re-anchors at a rendered line break, dropping the word and freezing
the gesture. preventDefault on touchstart disables it entirely; a
long-press timer selects the word under the finger instead and drag
moves extend word by word, clamped to the visible page and identical
for every word. Clean taps clear the selection or follow links
(click events being suppressed by the preventDefault).
A selection write at the moment Chrome re-anchors the drag detaches
its touch selection controller; the same writes on a settled
selection are fine. Record the word synchronously, repair only when
the selection has been unchanged for 150ms.
Rewriting both selection boundaries mid-gesture detaches Chrome's
touch selection controller and the selection stops following the
finger. extend() moves only the focus, which the controller
tolerates.
Dragging just past a line-start word makes Chrome flip the touch
selection and re-anchor it at a rendered line break, silently
dropping the long-pressed word from the selection. Record the word
at the initial long-press and restore its start boundary whenever
the selection no longer covers it.
The helper created its probe range in the module's own document
(the host, in the bundled web reader), so boundary points in the
content iframe collapsed the range and every selection read as
backward.
The last visible range can extend past the visible column on text
nodes that span multiple columns (its end-offset bisect uses union
rects), so comparing DOM boundary points against it misses off-view
selection endpoints. Test the endpoint caret rect against the
visible column bounds instead.
Chrome emits collapsed selectionchange events while the long-press
word selection is being set up; clearing the flag on them disarmed
the clamp before the selection ever became a Range.
Chrome word-snapping during a touch selection drag can map the
endpoint past the visible column into the next (off-screen) page,
selecting the entire visible page at once. Re-map the endpoint via
caretRangeFromPoint at the same line height inside the visible
column whenever it lands outside the last visible range.
IO with a shadow-host root never delivered intersections in Chromium
(verified live: pages stayed blank while the section.load→fetch→img
pipeline itself worked fine when probed from outside). Loading is now
driven from the rAF-throttled scroll handler that already tracked the
reading position: a window of [index-2, index+4] loads around the
viewport-center page, with a 'loading' guard against duplicate
in-flight loads. connectedCallback kicks the initial load window.
New <foliate-webtoon> custom element: every page stacked in one
scrolling column (max-width 900px centered on wide screens), the
standard long-strip manga reading mode.
- Pages lazy-load through an IntersectionObserver with a 150% root
margin so they're ready before scrolling into view; placeholders
carry an estimated min-height until the image loads, then the real
aspect-ratio — set on the placeholder element — so geometry stays
stable across unloads and the scrollbar never jumps.
- Pages more than 12 positions from the reading point are unloaded
(image removed, section blob URL revoked) to bound memory on long
webtoons; they simply reload if the user scrolls back.
- Relocate events ({reason:'scroll', index, fraction, size:1}) fire on
rAF-throttled scroll with the viewport-center page as index and the
visible position within it as fraction — compatible with view.js's
SectionProgress enrichment, so progress saving/restoring, the
slider, and the back-stack all work unchanged.
- Renderer contract mirrors fixed-layout: goTo(await {index}) scrolls
the page into view; next/prev page by ~one screen (view.init()'s
fresh-start probe is a no-op that reports location); goLeft/goRight
map to prev/next (vertical flow is direction-independent).
No zoom/magnifier APIs — the host already gates those on the flow.
- Page images honor --fx-filter from the host for the new
brightness/contrast/invert controls.
view.js picks the renderer when book.format === 'comic' (now tagged
by makeComicBook) and options.comic.flow === 'webtoon'.
documentElement's screen rect is devicePixelRatio× smaller than the
visible page because pdf.js scales <html> by 1/dpr — using it as the
hit-test denominator made click fractions dpr× too large, so clicks
landed in the wrong place relative to stored (correct) fractions on
any dpr != 1 display. The canvas's post-transform rect is exactly the
visible page and shares the textLayer's transform space.
The in-iframe SVG overlay was invisible on PDFs for two reasons:
- pdf.js applies transform: scale(1/devicePixelRatio) to the iframe's
<html>; an overlay inside that document shrinks into the top-left
corner on any dpr != 1 display. The transform is also applied only
after the page render, so load-time-injected overlays were sized
before the scale factor existed.
- Fraction rect geometry itself was correct (selection rects and the
denominator are both post-transform), but nothing inside the iframe
can escape its html transform.
Render annotations host-side instead: a div inside the frame's
wrapper element with percentage-positioned children. The wrapper box
always equals the visible page area for both formats — comics (iframe
CSS-scaled inside it) and PDFs (re-rendered at true scale) — so the
overlay is immune to the html transform, zoom re-renders, iframe
scaling, and host pan/zoom, still with zero re-anchoring. The
in-iframe click hit-test is unchanged (it compares fractions against
the same post-transform denominator).
Adds a parallel annotation pipeline for PDF/comic pages (the CFI
overlayer pipeline only exists for the reflowable paginator):
- addRectAnnotation({key, index, rects, color}) /
removeRectAnnotation(key): rects are page-fraction [x,y,w,h]
quads, stored per key and rendered into a full-bleed SVG injected
into the page iframe. The SVG uses viewBox 0 0 100 100 with
preserveAspectRatio none, so fraction rects stay aligned through
iframe CSS-zoom (comics), the host transform-based pan/zoom, and
PDF hi-res re-renders (pdf.js rebuilds canvas/textLayer but not
body children) — no re-anchoring hooks needed anywhere.
- Frames carry their section index; annotations re-render into each
freshly created iframe (#showSpread destroys and recreates frames
on every spread change).
- Clicks are hit-tested against the fraction rects (in iframe
coordinate space, denominator = img or documentElement bounding
rect so PDF's devicePixelRatio transform cancels) and emit
show-rect-annotation with host-space popover coordinates. Skipped
while a text selection is active so drag-selecting text doesn't
pop the editor.
- Comic page img is now display:block so the document box equals
the image box (no inline-baseline gap inflating denominators).
- Single finger: pan while zoomed; horizontal swipe pages at fit
(direction mapped through next()/prev() so RTL manga reads
correctly); drag on PDF text still defers to selection via the
existing smart-detection (realTarget).
- Two fingers: pinch-zoom around the midpoint (through the shared
zoom machinery, so PDF re-render scheduling works) plus
midpoint-pan; lifts back to single-finger pan when one lifts.
- Double-tap: zoom 2.5x at the point / reset to fit.
- Touch events forwarded from page iframes with converted
coordinates; preventDefault only when the engine actually consumes
the gesture so native selection/taps stay intact.
- touch-action: none on :host and in comic/pdf page documents so the
browser does not fight the gesture engine inside iframes.
'select' keeps smart behavior (drag text to select, drag blank to
pan); 'text' always defers to the text/annotation layer so drags
never pan — for users who want pure selection. Shift still force-pans
in both modes; 'pan' remains force-pan.
Reverts the pdf.js/view.js API change that removed the exported
'config' (pdfjsPath) and the makePDF/open options parameter.
bookhoard overrides config.pdfjsPath to point at its own served
/static/vendor/pdfjs/ assets, so the override + options must stay.
Keep the unrelated external-link href fix in view.js.
- In select mode, only defer to the text/annotation layer when the
pointer is actually on text or a link; otherwise start panning.
Lets PDF pages be dragged on blank space while keeping text
selection. Shift and explicit 'pan' mode still force-pan.
- Make the 'spread' attribute reactive: extract #computeSpreads(),
add #setSpread() which re-groups while preserving the current page.
Bundlers like Vite cannot resolve directory paths (cmaps/, standard_fonts/)
through the new URL(..., import.meta.url) pattern. Add optional config to
makePDF, makeBook, and View.open so consumers can provide explicit URLs.
When options are not provided, falls back to import.meta.url resolution
(preserving existing behavior for direct module usage).
- Change pdfjsPath template from 'vendor/pdfjs/' to
'./vendor/pdfjs/' so the relative glob resolves correctly
when the module is bundled with Vite
- Reformat entire file: 2-space indentation, double quotes, semicolons,
trailing commas, parenthesized arrow function parameters, and aligned
multi-line call arguments for consistency with the rest of the codebase
- Change pdfjsPath template from 'vendor/pdfjs/' to
'./vendor/pdfjs/' so the relative glob resolves correctly
when the module is bundled with Vite
- Reformat entire file: 2-space indentation, double quotes, semicolons,
trailing commas, parenthesized arrow function parameters, and aligned
multi-line call arguments for consistency with the rest of the codebase
Previously, each wheel event immediately called #updateFrameScales which
re-renders PDF canvases via onZoom on every tick. This caused visible
jank because canvas re-rendering is expensive and blocks the main thread.
Two improvements:
1. rAF accumulation: wheel events now accumulate zoom deltas and apply
them once per animation frame via requestAnimationFrame, coalescing
rapid scroll events into a single transform update. Reduced zoomStep
from 0.1 to 0.05 for finer granularity.
2. PDF zoom debouncing: during active scroll-zoom, PDF iframes are
visually scaled via CSS transform without calling onZoom (no canvas
re-render). After zoom settles (150ms timeout), onZoom is called to
re-render the canvas at the final resolution for crisp text. The
#pdfLastRenderedScale field tracks what resolution the canvas was
last rendered at so CSS scaling is relative to the rendered state.
Comics continue to call #updateFrameScales every frame since their
zoom is just a cheap CSS transform with no canvas work.
Timeouts are cleared on page turn, resize, and destroy to prevent
stale re-renders.
The zoom percentage display had two bugs:
1. Scroll-zoom never updated the status bar percentage because the
'zoom' event listener was registered inside the magnifier-toggle
click handler (only added on click, and re-added on each click).
2. After reset (fit-page), the status bar showed '100%' but the
zoom-in button treated the current scale as 1.0 (absolute), not
the fit-page scale (e.g. 0.3). This caused a wild zoom jump
from '100%' to '120%' that was actually a 4x visual change.
Fix by introducing a #baseScale field that captures the fit-page or
fit-width scale whenever the component renders in auto-fit mode. The
new currentScale getter exposes the actual transform scale, and
zoomPercent expresses it as a percentage of baseScale. All zoom-in/
zoom-out handlers (buttons and keyboard) now use currentScale instead
of getAttribute('zoom') || 1, and all percentage displays use
zoomPercent. The zoom event listener is registered once at setup
rather than inside the magnifier toggle handler.
Also removes all diagnostic console.log statements from fixed-layout.js
and reader.js.
John O'Keefe
john-okeefe
Francesco Martini