Webnovel Mobile View

Write and read web novels at phone width, inside Obsidian.

Korean web novel platforms are read on phones, where a line break lands in a completely different place than on a desktop editor. This plugin narrows a note to a real phone width (360px by default) so you can see the reader's line breaks while you write, and gives you a separate reader view with its own paper colour, font and phone frame.

The plugin UI is in Korean. 설정 화면은 한국어입니다.

Features

• Phone width — set a note (or a whole folder) to a phone-sized column. Device presets for 360 / 390 / 412px, or any width you like.
• Separate writing and reading styles — background theme, text colour, font, font size, line height and paragraph spacing are stored separately for the editing screen and the reader view.
• 13 background themes — white, light grey, ivory, sky, yellow-green, green, mint, sepia, night, dark green, navy, OLED black, or a custom colour. Only the phone area is coloured; everything outside keeps your Obsidian theme.
• Everything inside the phone follows the paper colour — headings, tags, frontmatter properties, links, code, tables and checkboxes are re-derived from the chosen background so nothing becomes unreadable.
• Font presets — Pretendard, 나눔고딕/명조, KoPub, 본명조, 리디바탕 and more, or pick from the fonts installed on your machine.
• Phone frame — rounded phone body with an optional status bar showing the time, note title, battery level and reading progress.
• Folder auto-apply — register a folder and every note in it opens in phone mode. Individual notes can still opt out.

How to use

1. Open a note and click the phone icon in the note header (left of the reading-mode button), or the ribbon icon.
2. Adjust width, colours and fonts in Settings → Webnovel Mobile View.
3. Switch to reading mode to see the reader view, or run the 웹소설 읽기 모드 전환 command.

Commands

Command	What it does
모바일 폭 토글 (현재 노트)	Turns phone width on/off, keeping the current mode
웹소설 읽기 모드 전환 (현재 노트)	Switches to reading mode with the reader styling, and back
이 노트가 있는 폴더를 자동 적용에 추가	Registers the current folder for auto-apply
개별 지정 전체 초기화	Clears every per-note override (folder rules stay)

Installation

From the community plugin list

Settings → Community plugins → Browse → search for "Webnovel Mobile View".

Manual

Download main.js, manifest.json and styles.css from the latest release and put them in <vault>/.obsidian/plugins/webnovel-mobile-view/, then enable the plugin in Settings → Community plugins.

Notes for reviewers

Three places touch APIs that are not part of the public obsidian typings. All of them are guarded and fall back cleanly:

• view.modeButtonEl — used to place the header button immediately left of the reading-mode button. Falls back to matching the button's tooltip, and if that fails the button simply stays where addAction() put it.
• view.previewMode.containerEl — used to attach the phone status bar above the reading view. Falls back to querySelector('.markdown-reading-view').
• app.plugins.plugins['writing-menu'] — read-only check of one boolean so link colouring can follow that plugin's "disable link colour" setting when the user chooses the automatic option. Wrapped in try/catch and never written to.

Dynamic values are passed to CSS as custom properties; no styles are hardcoded in JavaScript. All listeners, intervals, injected elements and classes are removed in onunload.

License

MIT