fix: swap paging keys when writing direction is set in config (#295)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -9,6 +9,7 @@ import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar';
 import { getStyles, mountAdditionalFonts } from '@/utils/style';
+import { getBookDirFromWritingMode } from '@/utils/book';
 import { useTheme } from '@/hooks/useTheme';
 import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import {
@@ -141,6 +142,11 @@ const FoliateViewer: React.FC<{
       const viewSettings = getViewSettings(bookKey)!;
       view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
 
+      const writingMode = viewSettings.writingMode;
+      if (writingMode) {
+        view.book.dir = getBookDirFromWritingMode(writingMode);
+      }
+
       const isScrolled = viewSettings.scrolled!;
       const marginPx = viewSettings.marginPx!;
       const gapPercent = viewSettings.gapPercent!;

apps/readest-app/src/app/reader/components/settings/FontPanel.tsx

@@ -20,6 +20,7 @@ import { useTheme } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
 import { getOSPlatform } from '@/utils/misc';
 import { FONT_ENUM_SUPPORTED_OS_PLATFORMS, getSysFontsList } from '@/utils/font';
+import { isTauriAppPlatform } from '@/services/environment';
 
 interface FontFaceProps {
   className?: string;
@@ -98,7 +99,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [monospaceFont, setMonospaceFont] = useState(viewSettings.monospaceFont!);
 
   useEffect(() => {
-    if (FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) {
+    if (isTauriAppPlatform() && FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) {
       getSysFontsList().then((fonts) => {
         setSysFonts(fonts);
       });

apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx

@@ -9,7 +9,7 @@ import { useBookDataStore } from '@/store/bookDataStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
-import { getBookLangCode } from '@/utils/book';
+import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book';
 import NumberInput from './NumberInput';
 
 const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
@@ -134,7 +134,10 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // global settings are not supported for writing mode
     viewSettings.writingMode = writingMode;
     setViewSettings(bookKey, viewSettings);
-    view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    if (view) {
+      view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+      view.book.dir = getBookDirFromWritingMode(writingMode);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [writingMode]);
 

apps/readest-app/src/libs/document.ts

@@ -63,6 +63,7 @@ export interface BookDoc {
     subject?: string[];
     identifier?: string;
   };
+  dir: string;
   toc?: Array<TOCItem>;
   sections?: Array<SectionItem>;
   splitTOCHref(href: string): Array<string | number>;

apps/readest-app/src/types/book.ts

@@ -46,6 +46,8 @@ export interface BookNote {
   deletedAt?: number | null;
 }
 
+export type WritingMode = 'auto' | 'horizontal-tb' | 'horizontal-rl' | 'vertical-rl';
+
 export interface BookLayout {
   marginPx: number;
   gapPercent: number;
@@ -55,7 +57,7 @@ export interface BookLayout {
   maxInlineSize: number;
   maxBlockSize: number;
   animated: boolean;
-  writingMode: string;
+  writingMode: WritingMode;
   vertical: boolean;
 }
 

apps/readest-app/src/types/view.ts

@@ -21,6 +21,7 @@ export interface FoliateView extends HTMLElement {
   select: (target: string | number | { fraction: number }) => void;
   deselect: () => void;
   initTTS: (granularity?: TTSGranularity) => Promise<void>;
+  book: BookDoc;
   tts: TTS | null;
   language: {
     locale?: string;

apps/readest-app/src/utils/book.ts

@@ -1,5 +1,5 @@
 import { EXTS } from '@/libs/document';
-import { Book, BookConfig, BookProgress } from '@/types/book';
+import { Book, BookConfig, BookProgress, WritingMode } from '@/types/book';
 import { getUserLang, makeSafeFilename } from './misc';
 
 export const getDir = (book: Book) => {
@@ -119,3 +119,15 @@ export const getCurrentPage = (book: Book, progress: BookProgress) => {
       ? pageinfo.current + 1
       : 0;
 };
+
+export const getBookDirFromWritingMode = (writingMode: WritingMode) => {
+  switch (writingMode) {
+    case 'horizontal-tb':
+      return 'ltr';
+    case 'horizontal-rl':
+    case 'vertical-rl':
+      return 'rtl';
+    default:
+      return 'auto';
+  }
+};