fix: now img in paragraph won't get indented and default to override book layout (#657)

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

@@ -326,21 +326,23 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               max={3.0}
               step={0.1}
             />
-            <NumberInput
-              label={_('Word Spacing')}
-              value={wordSpacing}
-              onChange={setWordSpacing}
-              min={-4}
-              max={8}
-              step={0.5}
-            />
+            {langCode !== 'zh' && (
+              <NumberInput
+                label={_('Word Spacing')}
+                value={wordSpacing}
+                onChange={setWordSpacing}
+                min={-4}
+                max={8}
+                step={0.5}
+              />
+            )}
             <NumberInput
               label={_('Letter Spacing')}
               value={letterSpacing}
               onChange={setLetterSpacing}
               min={-2}
               max={4}
-              step={0.1}
+              step={0.5}
             />
             <NumberInput
               label={_('Text Indent')}

apps/readest-app/src/services/constants.ts

@@ -99,7 +99,7 @@ export const DEFAULT_BOOK_STYLE: BookStyle = {
   invert: false,
   theme: 'light',
   overrideFont: false,
-  overrideLayout: false,
+  overrideLayout: true,
   userStylesheet: '',
 };
 

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

@@ -200,7 +200,7 @@ const getLayoutStyles = (
     background-color: transparent !important;
   }
   p, li, blockquote, dd {
-    margin: ${vertical ? `0 ${paragraphMargin}em` : `${paragraphMargin}em 0`};
+    margin: ${vertical ? `0 ${paragraphMargin}em` : `${paragraphMargin}em 0`} ${overrideLayout ? '!important' : ''};
     line-height: ${lineSpacing} ${overrideLayout ? '!important' : ''};
     word-spacing: ${wordSpacing}px ${overrideLayout ? '!important' : ''};
     letter-spacing: ${letterSpacing}px ${overrideLayout ? '!important' : ''};
@@ -214,6 +214,9 @@ const getLayoutStyles = (
     hanging-punctuation: allow-end last;
     widows: 2;
   }
+  li, p:has(> :is(img, video, font, h1, h2, h3, h4, h5, table)) {
+    text-indent: 0 !important;
+  }
   /* prevent the above from overriding the align attribute */
   [align="left"] { text-align: left; }
   [align="right"] { text-align: right; }