Projects › BibleWeb › Navigation UX › Fullscreen toggle (F11)
Planned

Fullscreen toggle (F11)

Area: Navigation UX

Context

Problem: When reading the Bible, users want maximum screen space for text — especially on laptops where browser chrome (tabs, address bar, bookmarks) takes significant vertical space.

Solution: A fullscreen toggle using the browser's Fullscreen API, triggered by F11 or a button in settings. Hides all browser chrome for an immersive reading experience.

Not included: A custom "distraction-free" mode that hides the app's own sidebar/nav. This is browser-level fullscreen only.

Functional

Expected user flow:

  1. User presses F11 or clicks a fullscreen button in settings
  2. Browser enters fullscreen mode — all browser chrome disappears
  3. The app fills the entire screen
  4. Press F11 again (or Escape) to exit fullscreen

Edge cases:

  • Desktop only — mobile browsers handle fullscreen differently
  • Some browsers may block programmatic fullscreen without user gesture
  • F11 may conflict with browser's native fullscreen shortcut (usually the same, which is fine)

UX & Design

Button: Optional toggle in Settings page (desktop only). Keyboard: F11 key binding.

Technical

Implementation:

  • Use Fullscreen API: document.documentElement.requestFullscreen()
  • F11 key binding in global keyboard handler
  • Toggle: check document.fullscreenElement to determine current state

Files:

  • apps/web/src/routes/(app)/+layout.svelte (modify — add F11 handler)
  • apps/web/src/routes/(app)/settings/+page.svelte (modify — add toggle button)

Status

Current: PLANNED Milestone: Foundation Priority: Low — nice-to-have for immersive reading

Dependencies:

  • Requires: nothing
← Back to Navigation UX features