18-1 E-book & Web Novel Viewer

What if you could preview your writing exactly as it would look in a real e-book or web novel app? One line of frontmatter turns an ordinary note into a page-turning e-book, or a web novel right inside a phone screen! 📖📱

← Home: ObsiKO 101 · Related: 18 Making Presentations · 18-2 Character Codex & References · 18-3 Messenger & Visual Novel Views

1-Minute Summary ⏱️

• Add view: book to the frontmatter → a page-turning e-book viewer 📖
• Add view: webnovel → a web novel viewer right inside a phone frame 📱
• Both viewers let you freely adjust font, size, margins, and theme from a single round floating settings button in the bottom-right corner! (Same glass design as the formatting toolbar in 23 Settings & Themes.)
• The magic spell works exactly the same way as marp: true in 18 Making Presentations.

1. Casting the Viewer Spell 🪄

Just add a view property to the frontmatter (the note's "ID card") area at the top of the document.

If there's no frontmatter box yet, right-click (long-press on iOS) and choose "Insert Frontmatter". Click the "+ Add Property" button below the box, pick view (it shows up as soon as you type v), and set the value to book (e-book) or webnovel (web novel) — done!

---
view: book
---

Once this spell is in place, open the View menu (👁) at the top and an item that's usually not there appears — ta-da! - view: book → "View as Book" (open-book icon 📖) - view: webnovel → "Web Novel View" (smartphone icon 📱)

💡 For web novels, web-novel and novel work just as well, and the value isn't case-sensitive (Book is fine too).

2. E-book Viewer 📖 — Just Like a Real E-book

Click the button and the screen goes full-screen, with the document automatically split into pages that fit the screen size, just like a book.

• Single-page / two-page view: Desktop and iPad default to two-page view (showing pages side by side, joined at the center, like an open book), and you can switch to single-page view. On the phone and tablet apps other than iPad (iPhone and Android), the screen width means it's always single-page view.
• Font choice: Pick from Maru Buri (default), RIDIBatang, KoPubWorld Batang/Dotum, Seoul Namsan, Source Han Sans, Source Han Serif, or the system font.
• Font size · margins: Font size uses a stepper (− number +), and margins have three levels — narrow/normal/wide.
• Theme: Day (light) · Sepia (easy-on-the-eyes cream) · Night (dark).
• Page numbers · progress: Each page has a number at the bottom, and a progress bar at the top shows at a glance how far you've read.

Turning Pages

• → / Space / PageDown: next page, ← / PageUp: previous page
• Click the left/right edge of the screen, or swipe left/right on a touch device
• Home / End: zip to the very beginning / the very end
• + / −: increase / decrease font size

3. Web Novel Viewer 📱 — That In-Your-Phone Feel

This time your writing appears inside a phone frame, just like a real web novel app. It even has space at the top and bottom for the camera and home button, for extra realism!

Layout Presets

We've prepared five presets that match the exact page proportions of real platforms. Each preset has its own default font, font size, line spacing, and background.

The preset dropdown in the bottom-right is always visible, so feel free to switch back and forth anytime. Amazingly, each preset remembers your own settings (theme, font, etc.) separately — so if you switch to Night theme in RIDI and then move to Kakao and back, RIDI is still exactly how you left it!

Scroll View ↕ vs Page View 📄

• Scroll view: The familiar way of reading up and down. Turn on the auto-scroll button (3 speed levels) and it reads on smoothly without you lifting a finger!
• Page view: One screen is one page. Read by flipping left and right. On a wide screen, you can even spread several pages side by side.
• The auto button also works in page view — here, pages turn by themselves at a steady interval. While auto-play is running, (on supported devices) it keeps the screen from turning off. 📱✨

Zip to the Next Episode — Continuous Serial Reading 📚

• If there are multiple view: webnovel documents in the same folder (like a serialized manuscript), the "Next Episode ▸" / "◂ Previous Episode" buttons on the last page let you switch files and keep reading straight through. They move in file-name order.

Other Settings

• Font · font size · line spacing · margins
• Alignment: left-aligned / justified
• Background: White · Cream · Sepia · Green · Dark
• 💡 Even if you resize the ObsiKO window, the content doesn't reflow — it just scales up and down at the same proportions, so your reading flow never breaks.

4. Tips Common to Both Viewers 🍯

• Resume where you left off 🔖: Close the viewer and reopen it, and it picks up exactly where you left off (remembered per document). A document you've read all the way to the end starts over from the beginning next time.
• Jump via table of contents 📑: If the document has headings (#, ##...), a table-of-contents button appears. Click it to bring up a chapter list and jump straight to where you want!
• Jump via the top progress bar: Click or drag the progress bar at the top to jump straight to that spot (in scroll view, it moves to that scroll position).
• Info in the top-right: Tells you the document's total page count · character count · estimated reading time (about n minutes) (character count in web novel scroll view).
• Floating settings button (round ⚙) in the bottom-right: Click it and the settings slide open upward. Click it again or tap outside to close. You don't need to open it every time you turn a page, so leave it closed normally.
• Mute the background music ♪: If the manuscript carries background music, a ♪ button appears at the top. Tap it to mute when you want to read in silence.
• Buttons quietly fade away: If there's no activity for a moment, the buttons and progress bar fade out softly so you can focus purely on the text. Move the mouse or tap the screen and they reappear.
• Links in the text are clickable too: You can click [[wiki links]] or web links right in the text to navigate (even if they sit on top of the page-turn area, the link takes priority).
• Exit: Click the ✕ button in the top-right of the screen, or just press Esc, to return to the editing screen.

5. What Can You Include? 🎁

Almost every bit of Markdown you normally use renders beautifully as-is — headings, lists, blockquotes, tables, highlights, images, code blocks, even charts and diagrams and KaTeX equations! The mood of the text follows whatever theme (background, text color) you've chosen in the viewer.

Character References and Background Music Come Alive Too 🎭🎵

If your manuscript contains the <<name:image>> syntax from 18-2 Character Codex & References — - A character reference appears as a round face icon + "quoted dialogue" with no name, and a background reference appears as a divider reading "name · image name" (a scene transition). - A line that attaches only music (![[song.mp3]], [[song.mp3]], or a bare path) loops as background music while that passage is visible. When you reach the next song's passage, the previous track fades out while the new one fades in — a smooth crossfade. Sound-effect links inline in a sentence and %%comments%% are quietly hidden.

If you're writing a novel, essay, or any long-form piece, the web novel viewer is perfect for checking "this is how it'll look to readers." If you're putting together a manuscript to bind into a book, preview the open-book feel with the e-book viewer! ✨

← Previous: Making Presentations · Home · Next: Character Codex & References →