RTL PDF Viewer
English | 日本語
A VS Code custom editor extension that lets you read PDFs with right-to-left horizontal scrolling (manga / Japanese vertical-text book style).
Features
- ✅ Right-to-left horizontal scrolling (manga / Japanese book style)
- ✅ Left-to-right horizontal scrolling (Western book style)
- ✅ Vertical scrolling (standard mode)
- ✅ Page navigation with arrow keys (auto-inverted in RTL mode)
- ✅ Zoom controls (zoom in / out / fit-to-width)
- ✅ Configurable defaults via settings
- ✅ Toolbar for instant direction switching
- ✅ Lazy page rendering with IntersectionObserver
Why this exists
Adobe Acrobat doesn't have a true horizontal scroll mode, and most PDF readers don't combine horizontal scroll + RTL page order — the natural way to read manga or Japanese books. Specialized comic readers exist (SumatraPDF, Honeyview), but if you live inside VS Code, switching apps just to read a book breaks the flow. This extension brings that reading experience directly into the editor.
Installation
Install from the VS Code Marketplace, or open the Extensions view (Ctrl+Shift+X) and search for RTL PDF Viewer.
That is all. PDF.js ships inside the extension, so there is nothing to download, build, or configure. Open any PDF, pick RTL PDF Viewer from the editor selector, and you are reading.
Building from source instead? See Development.
Usage
Open a PDF with RTL Viewer
- Right-click a
.pdf file
- "Open With..."
- Select "RTL PDF Viewer"
| Button |
Action |
| ◀ Prev / Next ▶ |
Page navigation |
| − / ＋ |
Zoom out / in |
| Fit Width |
Fit page to viewer width |
| ↔ Direction |
Toggle RTL ⇔ LTR |
| ⇅ Scroll |
Toggle horizontal ⇔ vertical |
| 📖 Spread |
Toggle two-page spread |
Keyboard shortcuts (in RTL horizontal mode)
| Key |
Action |
→ |
Previous page (it's on the right) |
← |
Next page (it's on the left) |
↓ / Space / PageDown |
Next page |
↑ / PageUp |
Previous page |
Home |
Jump to first page |
End |
Jump to last page |
| Mouse wheel |
Horizontal scroll (vertical wheel → horizontal movement) |
In LTR or vertical mode, keys map to the natural direction.
Configuration
In settings.json:
{
"rtlPdfViewer.readingDirection": "rtl", // "rtl" or "ltr"
"rtlPdfViewer.scrollMode": "horizontal", // "horizontal" or "vertical"
"rtlPdfViewer.spread": false, // two-page spread
"rtlPdfViewer.defaultScale": 1.5 // 0.5 - 3.0
}
Project structure
rtl-pdf-viewer/
├── package.json # Extension manifest
├── tsconfig.json
├── .vscodeignore
├── src/
│ └── extension.ts # CustomEditorProvider implementation
├── media/
│ ├── viewer.css # RTL horizontal scroll styles
│ ├── viewer.js # PDF.js integration & UI logic
│ └── pdfjs/ # PDF.js (downloaded by setup)
├── scripts/
│ └── download-pdfjs.js # PDF.js fetch script
└── .vscode/
├── launch.json
└── tasks.json
How it works
The extension registers a CustomReadonlyEditorProvider for .pdf files. When a PDF is opened, it spins up a WebView that:
- Loads PDF.js as an ES module
- Renders each page to a
<canvas> element
- Arranges canvases in a flex container with
direction: rtl (or ltr)
- Uses
overflow-x: auto to enable horizontal scrolling
- Lazy-renders only visible pages via
IntersectionObserver for performance
The key CSS:
#viewer[data-scroll="horizontal"][data-direction="rtl"] {
display: flex;
flex-direction: row;
direction: rtl; /* page 1 on the right, page N on the left */
overflow-x: auto;
}
Known limitations (prototype)
- No text search
- No text selection (canvas-based rendering)
- No outline / bookmarks
- Large PDFs may take time on initial load
- PDFs without embedded Japanese fonts may display garbled text (CMaps not bundled)
These are future enhancement targets.
Troubleshooting
"RTL PDF Viewer" doesn't appear in the editor selector
- Verify the extension is installed:
code --list-extensions | findstr rtl-pdf
- Restart VS Code
PDF appears blank
- Open Developer Tools:
Ctrl+Shift+P → "Developer: Toggle Developer Tools" → check console errors
- Verify PDF.js was downloaded:
media/pdfjs/pdf.min.mjs should exist
Compile errors
- Make sure
npm install succeeded
- Check
node_modules/@types/vscode exists
Tech stack
- TypeScript — extension host code
- VS Code Custom Editor API —
CustomReadonlyEditorProvider
- PDF.js v4.7.76 — Mozilla's PDF rendering engine
- WebView API — sandboxed HTML/CSS/JS rendering
Development
1. Install dependencies
cd rtl-pdf-viewer
npm install
2. Download PDF.js
npm run setup
This downloads PDF.js v4.7.76 into media/pdfjs/.
3. Compile TypeScript
npm run compile
4. Run in development mode (recommended)
- Open the
rtl-pdf-viewer folder in VS Code
- Press
F5 → Extension Development Host opens in a new window
- In the new window, open any PDF — "RTL PDF Viewer" appears in the editor selector
- To make it default: Right-click PDF → "Open With..." → "RTL PDF Viewer" → "Configure default editor for .pdf"
5. Package as VSIX
npm run package
Generates rtl-pdf-viewer-<version>.vsix in the repository root.
6. Install the VSIX
code --install-extension rtl-pdf-viewer-<version>.vsix
Contributing
Contributions welcome. Please open an issue first for major changes.
Publishing
See PUBLISHING.md for the release workflow and VS Code Marketplace setup.
License
MIT
