Width Ruler

A Google Docs style ruler above your notes. Drag the margin markers to set how wide your text is.

Obsidian's Readable line length is all or nothing: a narrow 700 px column, or the whole pane. Width Ruler lets you choose anything in between, visually, and works with any theme.

Features

• A ruler above every note, in editing, Live Preview and reading view. Zero is at the left edge of the text, like Google Docs.
• Drag either marker to change the width. Both margins move together, so the text stays centred. Dragging snaps to the small ticks; hold Shift to move freely. Drag past the edge of the pane for full width.
• Type an exact width: double-click a marker, click the width shown at the right of the ruler, or run Set note width… from the command palette. Accepts 900, 900px, 24cm, 9in, 90ch or full.
• Presets (Narrow, Default, Wide, Extra wide, Full) in the ruler's right-click menu and as commands. You can edit the list in settings.
• Per-note widths, saved in the note's properties. A note with its own width always keeps it.
• Units: centimetres, inches, pixels or characters (measured from your editor font).
• Works whether Readable line length is on or off.

Installation

Width Ruler isn't in the Community plugins directory yet. Until it is, install it in one of these ways.

With BRAT

1. Install and enable BRAT from Settings → Community plugins → Browse.
2. Run the command BRAT: Add a beta plugin for testing.
3. Enter javimey/obsidian-width-ruler and confirm.
4. Turn on Width Ruler in Settings → Community plugins.

BRAT also keeps the plugin up to date.

Manually

1. Download main.js, manifest.json and styles.css from the latest release.
2. In your vault, create the folder .obsidian/plugins/width-ruler/ and put the three files in it. (.obsidian is hidden: on macOS press Cmd+Shift+. in Finder to show it; on Windows turn on View → Show → Hidden items in File Explorer.)
3. Restart Obsidian, or click the reload icon next to Installed plugins in Settings → Community plugins.
4. Turn on Width Ruler in the same list.

Usage

Width for all notes, or for one note

By default, dragging the ruler sets the width for all notes. To give one note its own width, right-click the ruler and choose Keep this width for this note only. Or set the property yourself:

---
note-width: 900px
---

The value can be any width the plugin accepts: 900px, 24cm, 9in, 90ch or full. While a note has its own width, dragging the ruler changes that note only. To go back to the default, right-click the ruler and choose Use the default width for this note.

If you'd rather have every drag set a per-note width, change Dragging the ruler changes in settings.

Until you set a width, your theme's own width is used and the ruler just shows it.

Commands

All of them can have hotkeys in Settings → Hotkeys.

Settings

• Default width: the width for notes without their own. Leave it empty to keep your theme's width.
• Dragging the ruler changes: all notes, or only the current note.
• Frontmatter property: the property name for per-note widths (default note-width).
• Show ruler above notes.
• Units for the ruler markings and the width readout.
• Presets: one per line, as name: width. Changes to the list take effect in the command palette after restarting Obsidian.

How it works

The plugin sets Obsidian's own --file-line-width CSS variable on each pane, so themes and other plugins that respect that variable keep working. It doesn't need a CSS snippet or a particular theme.

Development

npm install
npm run dev     # rebuild main.js on every change
npm run build   # type-check and build for release
npm run lint    # the same checks Obsidian's community directory runs

Releasing

Bump version in manifest.json and package.json, add it to versions.json, commit, then push a tag with the same version (no v prefix):

git tag 0.1.3 && git push origin main 0.1.3

GitHub Actions builds the plugin from source, signs main.js, manifest.json and styles.css with an artifact attestation, and publishes the release. Verify a download with gh attestation verify main.js --repo javimey/obsidian-width-ruler.

Testing locally

Copy main.js, manifest.json and styles.css into .obsidian/plugins/width-ruler/ in a test vault to try your changes. npm run deploy:mac does this for one particular setup over SSH; edit scripts/deploy-mac.sh for yours.

License

MIT © Javier Mey