Skip to content

Conversation

@LordHerdier
Copy link
Contributor

Aims to add proper loading of fonts within the epub reader. This applies to current book defaults, library defaults, and global font defaults. This also aims to resolve #660.

While the feature is nearly fully functional, I'm starting this off as a draft because this code is honestly painful to read and I'm looking for feedback on how to not make it as much of a mess. Also making the PR against experimental due to changes that might have unintended side effects.

What is changed

  • Refactored font handling to have a more centralized location for the web app. General font functions live under utils/fonts.ts now.
  • Copied raw font files to the public assets folder. This was due to vite not bundling all of the fonts, and appending hashes to the file name, making it difficult to pass the proper url to the browser. This is one aspect that I dislike about the implementation, and would preferably like to either use the standard font store, or migrate the rest of the application's font handling to pull from the new directory.
  • Loads fonts in the reader by building the font url from the selected option, caching the built css, then injecting it into the head of each rendered section via DOM manipulation. We have to do this instead of using EpubJs's .font() due to its iframe not having the app's context with the already loaded custom fonts. It also manages remounting the reader when font family/preferences change. This is about as heavy handed as you could get, so if anyone has a better idea, I am all ears.

What still needs to happen

  • Due to the fonts being injected after the reader is rendered, you can sometimes see when it is loaded. Need to address this.
  • Would like to better handle grabbing the font urls.
  • Would like to find an alternative to DOM manipulation.

Sidenote: I based this PR off of the current development branch before I rebased due to the amount of changes. Experimental is slightly behind develop at the moment, which is why there are a couple extra commits.

LordHerdier and others added 15 commits May 12, 2025 14:21
- Introduced a new LineHeightControl component for adjusting line height in the EPUB reader.
- Updated the ThemeControls to include the new LineHeightControl.
- Enhanced the applyTheme function to apply line height from user preferences.
- Added lineHeight property to BookPreferences in the reader store with a default value of 1.5.
- Added a new ReadingMode component for selecting between paged and continuous reading modes.
- Updated EpubNavigationControls to handle swipe gestures based on the selected reading mode.
- Modified EpubJsReader to set the flow based on the chosen reading mode.
- Integrated ReadingMode component into ThemeControls.
- Introduced DefaultLineHeight component to allow users to set line height in the reader settings.
- Integrated DefaultLineHeight into ReaderDefaultSettingsScene.
- Updated tailwind preset to include a default line height value.
- Added localization entries for line height settings in the English language JSON file, including label and description for user interface consistency.
- Simplified line height validation in LineHeightControl
- Updated DefaultLineHeight component to match values in LineHeightControl
- Updated ReadingMode component to use explicit reading mode type rather than any
- Moved SUPPORTED_FONT_OPTIONS to a new utility file for better organization.
- Updated FontFamily, FontSelect, and DefaultFontFamily components to import font options from the new utility file.
- This aims to better align font names with their css style conterparts
- Introduced utility functions for font path and CSS retrieval to streamline font handling.
- Updated EpubJsReader to register and apply font themes dynamically based on user preferences.
- Doesn't download the fonts properly just yet.
- Removed deprecated font theme registration and streamlined font injection logic in EpubJsReader.
- Introduced a new helper function to manage font CSS injection for rendered contents based on user preferences.
- Updated FontFamily component to ensure proper type handling for font family selections.
- Enhanced useBookPreferences to maintain consistent state management for book preferences.
- This is still an absolute mess and needs refactoring BADLY...
- While the reader can now switch fonts, it will sometimes require a reload of the book to properly swap over. Need to figure out why still...
- Still an absolute hot mess, but you can change fonts now
- Added state management for font changes in EpubJsReader to trigger a remount when the font family is updated.
- Enhanced the FontFamily component to log font changes and ensure proper updates to book preferences.
- Updated useBookPreferences to include debug logging for better tracking of preferences retrieval and updates.
- Introduced a cleanup function to properly destroy the current reader instance before remounting.
- Added a fontCssRef to cache CSS for each font family
- Added a useEffect that preloads tdhe font css when modified
- Created a loadFontCss function that will handle cacheing and loading of the font css
- Added cancellation logic to prevent state updates after component unmount.
- Added rendition destroy on preference change to prevent duplicate readers being rendered
- Previous raw font file location was not accessible to the browser due to vite bundler, without adding the font hash to the file name
- If anyone knows a way around this please let me know...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants