From 86c7c950e4dd9daef396fde5383972ecf6567497 Mon Sep 17 00:00:00 2001
From: Deyao Chen <chendeyao000@gmail.com>
Date: Thu, 12 Mar 2026 23:09:39 +0000
Subject: [PATCH 1/2] add left text align

---
 apps/reader/locales/en-US.ts                       |  4 ++++
 apps/reader/locales/ja-JP.ts                       |  4 ++++
 apps/reader/locales/zh-CN.ts                       |  4 ++++
 .../src/components/viewlets/TypographyView.tsx     | 14 +++++++++++++-
 apps/reader/src/state.ts                           |  2 ++
 5 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/apps/reader/locales/en-US.ts b/apps/reader/locales/en-US.ts
index 31ed17b8..7781a03e 100644
--- a/apps/reader/locales/en-US.ts
+++ b/apps/reader/locales/en-US.ts
@@ -37,6 +37,10 @@ export default {
   'typography.font_size': 'Font Size',
   'typography.font_weight': 'Font Weight',
   'typography.line_height': 'Line Height',
+  'typography.text_align': 'Text Alignment',
+  'typography.text_align.default': 'Default',
+  'typography.text_align.left': 'Left aligned',
+  'typography.text_align.justify': 'Justified',
   'typography.zoom': 'Zoom',
 
   'theme.title': 'Theme',
diff --git a/apps/reader/locales/ja-JP.ts b/apps/reader/locales/ja-JP.ts
index 473dfd12..2f2a2da0 100644
--- a/apps/reader/locales/ja-JP.ts
+++ b/apps/reader/locales/ja-JP.ts
@@ -37,6 +37,10 @@ export default {
   'typography.font_size': 'フォントサイズ',
   'typography.font_weight': 'フォントウェイト',
   'typography.line_height': '行の高さ',
+  'typography.text_align': 'テキストの配置',
+  'typography.text_align.default': 'デフォルト',
+  'typography.text_align.left': '左揃え',
+  'typography.text_align.justify': '両端揃え',
   'typography.zoom': 'ズーム',
 
   'theme.title': 'テーマ',
diff --git a/apps/reader/locales/zh-CN.ts b/apps/reader/locales/zh-CN.ts
index d11df16f..df1781da 100644
--- a/apps/reader/locales/zh-CN.ts
+++ b/apps/reader/locales/zh-CN.ts
@@ -37,6 +37,10 @@ export default {
   'typography.font_size': '字号',
   'typography.font_weight': '字重',
   'typography.line_height': '行高',
+  'typography.text_align': '对齐方式',
+  'typography.text_align.default': '默认',
+  'typography.text_align.left': '左对齐',
+  'typography.text_align.justify': '两端对齐',
   'typography.zoom': '缩放',
 
   'theme.title': '颜色主题',
diff --git a/apps/reader/src/components/viewlets/TypographyView.tsx b/apps/reader/src/components/viewlets/TypographyView.tsx
index f7b5995b..cb2a01fc 100644
--- a/apps/reader/src/components/viewlets/TypographyView.tsx
+++ b/apps/reader/src/components/viewlets/TypographyView.tsx
@@ -30,7 +30,7 @@ export const TypographyView: React.FC<PaneViewProps> = (props) => {
 
   const [localFonts, setLocalFonts] = useState<string[]>()
 
-  const { fontFamily, fontSize, fontWeight, lineHeight, zoom, spread } =
+  const { fontFamily, fontSize, fontWeight, lineHeight, textAlign, zoom, spread } =
     scope === TypographyScope.Book
       ? focusedBookTab?.book.configuration?.typography ?? defaultSettings
       : settings
@@ -162,6 +162,18 @@ export const TypographyView: React.FC<PaneViewProps> = (props) => {
             setTypography('lineHeight', v || undefined)
           }}
         />
+        <Select
+          name={t('text_align')}
+          value={textAlign ?? ''}
+          onChange={(e) => {
+            const value = e.target.value as '' | 'left' | 'justify'
+            setTypography('textAlign', value || undefined)
+          }}
+        >
+          <option value="">{t('text_align.default')}</option>
+          <option value="left">{t('text_align.left')}</option>
+          <option value="justify">{t('text_align.justify')}</option>
+        </Select>
         <NumberField
           name={t('zoom')}
           min={1}
diff --git a/apps/reader/src/state.ts b/apps/reader/src/state.ts
index 9f40b9ce..d370a3b2 100644
--- a/apps/reader/src/state.ts
+++ b/apps/reader/src/state.ts
@@ -1,5 +1,6 @@
 import { IS_SERVER } from '@literal-ui/hooks'
 import { atom, AtomEffect, useRecoilState } from 'recoil'
+import type { CSSProperties } from 'react'
 
 import { RenditionSpread } from '@flow/epubjs/types/rendition'
 
@@ -37,6 +38,7 @@ export interface TypographyConfiguration {
   fontWeight?: number
   fontFamily?: string
   lineHeight?: number
+  textAlign?: CSSProperties['textAlign']
   spread?: RenditionSpread
   zoom?: number
 }

From 00d969df72f1ed7091051574a40f71f277bef33e Mon Sep 17 00:00:00 2001
From: Deyao Chen <chendeyao000@gmail.com>
Date: Thu, 12 Mar 2026 23:21:18 +0000
Subject: [PATCH 2/2] fix import order

---
 apps/reader/src/state.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/reader/src/state.ts b/apps/reader/src/state.ts
index d370a3b2..f2f30dd1 100644
--- a/apps/reader/src/state.ts
+++ b/apps/reader/src/state.ts
@@ -1,6 +1,6 @@
 import { IS_SERVER } from '@literal-ui/hooks'
-import { atom, AtomEffect, useRecoilState } from 'recoil'
 import type { CSSProperties } from 'react'
+import { atom, AtomEffect, useRecoilState } from 'recoil'
 
 import { RenditionSpread } from '@flow/epubjs/types/rendition'