Add CSS-variable reader styling with configurable controls

src/components/html/Editor/Html.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="mode">
+  <div :class="mode" :style="readCssVars">
     <q-editor
       ref="editorRef"
       paragraph-tag="p"
@@ -24,6 +24,7 @@ import bbCodeParser from 'src/utils/bbcode/simple'
 import sanitizerHtml from 'src/utils/sanitizeHtml'
 
 import { useIsActivated } from 'src/composition/useIsActivated'
+import { useReadCssVars } from 'src/composition/useReadCssVars'
 
 import { uploadImage } from 'src/services/user'
 
@@ -32,6 +33,7 @@ import type { QEditor, QEditorCommand } from 'quasar'
 const props = defineProps<{ mode: 'simple' | 'common'; html: string }>()
 const $q = useQuasar()
 const emit = defineEmits(['update:html'])
+const { readCssVars } = useReadCssVars()
 let isInternalChange = false
 
 const processHtml = (html: string) => {

src/components/html/Editor/MarkDown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="mode">
+  <div :class="mode" :style="readCssVars">
     <md-editor
       ref="editorRef"
       v-model="markdownText"
@@ -42,6 +42,8 @@ import { ref, watch } from 'vue'
 
 import sanitizerHtml from 'src/utils/sanitizeHtml'
 
+import { useReadCssVars } from 'src/composition/useReadCssVars'
+
 import { uploadImage } from 'src/services/user'
 
 import type { ToolbarNames, ExposeParam } from 'md-editor-v3'
@@ -53,6 +55,7 @@ const props = defineProps<{ mode: 'simple' | 'common'; html: string }>()
 const $q = useQuasar()
 const editorRef = ref<ExposeParam>()
 const emit = defineEmits(['update:html'])
+const { readCssVars } = useReadCssVars()
 
 const mdToolBar: ToolbarNames[] = [
   'bold',

src/components/html/HtmlReader.vue

@@ -1,5 +1,11 @@
 <template>
-  <div ref="contentRef" class="html-reader print-hide" v-html="props.html" @click="clickHandle" />
+  <div
+    ref="contentRef"
+    class="html-reader print-hide"
+    v-html="props.html"
+    :style="readCssVars"
+    @click="clickHandle"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -10,6 +16,8 @@ import { useSettingStore } from 'stores/setting'
 
 import { useLayout } from 'components/app/useLayout'
 
+import { useReadCssVars } from 'src/composition/useReadCssVars'
+
 import { PROVIDE } from 'src/const/provide'
 
 const $q = useQuasar()
@@ -20,6 +28,7 @@ const imagePreview = inject<any>(PROVIDE.IMAGE_PREVIEW)
 
 const { headerOffset } = layout
 const { readSetting } = settingStore
+const { readCssVars } = useReadCssVars()
 
 const props = defineProps<{ html: string }>()
 const contentRef = ref<HTMLElement>()

src/composition/useReadCssVars.ts

@@ -0,0 +1,23 @@
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import { useSettingStore } from 'stores/setting'
+
+export function useReadCssVars() {
+  const settingStore = useSettingStore()
+  const { readSetting } = storeToRefs(settingStore)
+
+  const readCssVars = computed(() => {
+    const setting = readSetting.value
+    return {
+      '--read-font-size': `${setting.fontSize}px`,
+      '--read-line-height': `${setting.lineHeight}`,
+      '--read-paragraph-spacing': `${setting.paragraphSpacing}em`,
+      '--read-paragraph-indent': `${setting.paragraphIndent}em`,
+    }
+  })
+
+  return {
+    readCssVars,
+  }
+}

src/css/read.scss

@@ -1,8 +1,20 @@
+:root {
+  --read-font-size: 16px;
+  --read-line-height: 1.8;
+  --read-paragraph-spacing: 0px;
+  --read-paragraph-indent: 2em;
+}
+
+:where(.html-reader, .md-editor-preview, .q-editor__content) {
+  font-size: var(--read-font-size, 16px);
+  line-height: var(--read-line-height, 1.8);
+}
+
 p {
-  margin: 0;
+  margin: 0 0 var(--read-paragraph-spacing, 0px);
   padding: 0;
-  line-height: 1.8em;
-  text-indent: 2em;
+  line-height: var(--read-line-height, 1.8);
+  text-indent: var(--read-paragraph-indent, 2em);
 
   img {
     margin: 0 5px;

src/pages/Book/Read/Read.vue

@@ -140,6 +140,7 @@ import { DragPageSticky } from 'components'
 import { useLayout } from 'components/app/useLayout'
 import HtmlReader from 'components/html/HtmlReader.vue'
 
+import { useReadCssVars } from 'src/composition/useReadCssVars'
 import { useTimeoutFn } from 'src/composition/useTimeoutFn'
 
 import { NOOP } from 'src/const/empty'
@@ -220,6 +221,7 @@ if (!CSS.supports('line-break', 'anywhere')) {
 }
 
 const { readSetting } = settingStore
+const { readCssVars } = useReadCssVars()
 const bgStyle = computed(() => ({
   backgroundImage:
     readSetting.bgType === 'paper'
@@ -244,7 +246,7 @@ function toggleDark() {
 }
 
 const readStyle = computed(() => ({
-  fontSize: readSetting.fontSize + 'px',
+  ...readCssVars.value,
   textAlign: readSetting.justify ? 'justify' : 'initial',
   color:
     readSetting.bgType === 'custom' ? (colors.brightness(readSetting.customColor) < 128 ? '#fff' : '#000') : 'inherit',

src/pages/Setting.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-page>
+  <q-page class="setting-page">
     <div class="q-pa-md q-mx-auto" :style="`width: ${$q.screen.gt.md ? settingStore['getGlobalWidth'] : '100%'}`">
       <div class="q-gutter-y-md">
         <q-tabs dense v-model="tab" class="text-teal">
@@ -80,6 +80,42 @@
                 <q-slider label v-model="readSetting.fontSize" :min="12" :max="30" />
               </div>
               <q-separator />
+              <div class="q-gutter-xs q-mt-md">
+                <div class="text-subtitle1">阅读样式</div>
+                <div v-for="option in readStyleOptions" :key="option.key" class="q-mt-sm read-style-row">
+                  <div class="row items-center justify-between q-mb-xs">
+                    <div>{{ option.label }}</div>
+                    <div class="text-caption text-grey-7">{{ readStyleLabel(option) }}</div>
+                  </div>
+                  <div class="row items-center q-gutter-sm read-style-control">
+                    <q-slider
+                      class="col"
+                      v-model.number="readSetting[option.key]"
+                      :min="option.min"
+                      :max="option.max"
+                      :step="option.step"
+                      label
+                      :label-value="readStyleLabel(option)"
+                    />
+                    <q-input
+                      dense
+                      outlined
+                      type="number"
+                      class="read-style-input"
+                      input-class="text-right"
+                      v-model.number="readSetting[option.key]"
+                      :min="option.min"
+                      :max="option.max"
+                      :step="option.step"
+                    >
+                      <template v-if="option.unit" #append>
+                        <div>{{ option.unit }}</div>
+                      </template>
+                    </q-input>
+                  </div>
+                </div>
+              </div>
+              <q-separator />
               <div class="q-gutter-xs q-mt-md">
                 <div class="text-subtitle1">
                   阅读页宽度{{ readSetting.widthType === 'custom' ? '（设为 0 时为全屏，只在大屏幕下生效）' : '' }}
@@ -162,6 +198,26 @@ const settingStore = useSettingStore()
 const { dark } = storeToRefs(settingStore)
 const { readSetting, generalSetting, editorSetting } = settingStore
 
+type ReadSettingKey = 'lineHeight' | 'paragraphSpacing' | 'paragraphIndent'
+type ReadStyleOption = {
+  key: ReadSettingKey
+  label: string
+  min: number
+  max: number
+  step: number
+  unit?: string
+  precision?: number
+}
+
+const readStyleOptions: ReadStyleOption[] = [
+  { key: 'lineHeight', label: '行高', min: 1, max: 3, step: 0.05, precision: 2 },
+  { key: 'paragraphSpacing', label: '段间距', min: 0, max: 2, step: 0.05, unit: 'em', precision: 2 },
+  { key: 'paragraphIndent', label: '段首缩进', min: 0, max: 4, step: 0.25, unit: 'em', precision: 1 },
+]
+
+const readStyleLabel = (option: ReadStyleOption) =>
+  `${readSetting[option.key].toFixed(option.precision ?? 0)}${option.unit ?? ''}`
+
 const tab = ref('Setting')
 
 watch(dark, (newDark) => {
@@ -175,6 +231,23 @@ watch([readSetting, generalSetting, editorSetting], settingStore.save)
 </script>
 
 <style lang="scss" scoped>
+.setting-page {
+  overflow-x: hidden;
+}
+
+.read-style-row {
+  overflow-x: hidden;
+}
+
+.read-style-control {
+  flex-wrap: nowrap;
+}
+
+.read-style-input {
+  width: 96px;
+  flex: 0 0 96px;
+}
+
 .preview {
   @media screen and (min-width: $breakpoint-md-min) {
     width: var(--width);

src/stores/setting.ts

@@ -16,6 +16,9 @@ export const useSettingStore = defineStore('app.setting', {
     },
     readSetting: {
       fontSize: 16,
+      lineHeight: 1.8,
+      paragraphSpacing: 0,
+      paragraphIndent: 2,
       bgType: 'none' as 'none' | 'paper' | 'custom',
       customColor: '#000000',
       convert: null as null | 't2s' | 's2t',