# 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