fix(docs): strikethrough position is incorrect (#1836)

* fix: strikethrough position is incorrect * refactor: strikethrough * fix: strikethrough
dream-num · Apr 11, 2024 · 3f68158 · 3f68158
1 parent 87d8e20
commit 3f68158
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 30 deletions.
diff --git a/examples/src/docs/main.ts b/examples/src/docs/main.ts
@@ -23,7 +23,7 @@ import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
 import { UniverUIPlugin } from '@univerjs/ui';
 
 import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
-import { DEFAULT_DOCUMENT_DATA_EN } from '../data';
+import { DEFAULT_DOCUMENT_DATA_CN } from '../data';
 import { DebuggerPlugin } from '../plugins/debugger';
 import { locales } from './locales';
 
@@ -61,7 +61,7 @@ univer.registerPlugin(UniverDocsUIPlugin, {
     },
 });
 
-univer.createUniverDoc(DEFAULT_DOCUMENT_DATA_EN);
+univer.createUniverDoc(DEFAULT_DOCUMENT_DATA_CN);
 
 // use for console test
 declare global {

diff --git a/packages/engine-render/src/basics/font-cache.ts b/packages/engine-render/src/basics/font-cache.ts
@@ -21,9 +21,9 @@ import type { IDocumentSkeletonBoundingBox, IDocumentSkeletonFontStyle } from '.
 import type { IMeasureTextCache } from './interfaces';
 
 const getDefaultBaselineOffset = (fontSize: number) => ({
-    sbr: 0.5,
+    sbr: 0.6,
     sbo: fontSize,
-    spr: 0.5,
+    spr: 0.6,
     spo: fontSize,
 });
 
@@ -340,10 +340,11 @@ export class FontCache {
             aba: actualBoundingBoxAscent,
             abd: actualBoundingBoxDescent,
             sp: (fontBoundingBoxAscent + fontBoundingBoxDescent) / 2,
-            sbr: 0.5,
-            sbo: fontSize,
-            spr: 0.5,
-            spo: fontSize,
+            sbr: 0.6,
+            spr: 0.6,
+            // https://en.wikipedia.org/wiki/Subscript_and_superscript Microsoft Word 2015
+            sbo: (fontBoundingBoxAscent + fontBoundingBoxDescent) * 0.141,
+            spo: (fontBoundingBoxAscent + fontBoundingBoxDescent) * 0.4,
         };
     }
 }
diff --git a/packages/engine-render/src/basics/tools.ts b/packages/engine-render/src/basics/tools.ts
@@ -311,9 +311,13 @@ export function getFontStyleString(textStyle?: IStyleBase, localeService?: Local
 
     const { va: baselineOffset } = textStyle;
 
-    if (baselineOffset === BaselineOffset.SUBSCRIPT || baselineOffset === BaselineOffset.SUPERSCRIPT) {
+    if (
+        baselineOffset === BaselineOffset.SUBSCRIPT ||
+        baselineOffset === BaselineOffset.SUPERSCRIPT
+    ) {
         const baselineOffsetInfo = FontCache.getBaselineOffsetInfo(fontFamilyResult, fontSize);
         const { sbr, spr } = baselineOffsetInfo;
+
         fontSize *= baselineOffset === BaselineOffset.SUBSCRIPT ? sbr : spr;
     }
 

diff --git a/packages/engine-render/src/components/docs/extensions/font-and-base-line.ts b/packages/engine-render/src/components/docs/extensions/font-and-base-line.ts
@@ -72,20 +72,10 @@ export class FontAndBaseLine extends docExtension {
             ctx.fillStyle = fontColor;
         }
 
-        if (baselineOffset === BaselineOffset.SUBSCRIPT || baselineOffset === BaselineOffset.SUPERSCRIPT) {
-            // const { renderConfig = {} } = this.extensionOffset;
-
-            // const { centerAngle = 0 } = renderConfig;
-            let offset = 0;
-
-            if (baselineOffset === BaselineOffset.SUPERSCRIPT) {
-                offset = -bBox.sbo;
-            }
-
-            // const offsetSin = offset * Math.sin(centerAngle);
-            // const offsetCos = offset * Math.cos(centerAngle);
-
-            spanPointWithFont.y += offset;
+        if (baselineOffset === BaselineOffset.SUPERSCRIPT) {
+            spanPointWithFont.y += -bBox.spo;
+        } else if (baselineOffset === BaselineOffset.SUBSCRIPT) {
+            spanPointWithFont.y += bBox.sbo;
         }
 
         // console.log(content, spanPointWithFont.x, spanPointWithFont.y, startX, startY);

diff --git a/packages/engine-render/src/components/docs/extensions/line.ts b/packages/engine-render/src/components/docs/extensions/line.ts
@@ -15,7 +15,7 @@
  */
 
 import type { IScale, ITextDecoration } from '@univerjs/core';
-import { BooleanNumber, getColorStyle, TextDecoration } from '@univerjs/core';
+import { BaselineOffset, BooleanNumber, getColorStyle, TextDecoration } from '@univerjs/core';
 
 import { COLOR_BLACK_RGB, DEFAULT_OFFSET_SPACING, FIX_ONE_PIXEL_BLUR_OFFSET } from '../../../basics/const';
 import { calculateRectRotate } from '../../../basics/draw';
@@ -49,13 +49,13 @@ export class Line extends docExtension {
             return;
         }
 
-        const { sp: strikeoutPosition, ba } = bBox;
+        const { sp: strikeoutPosition, spo, sbo, bd } = bBox;
 
         const scale = getScale(parentScale);
 
         const DELTA = 0.5;
 
-        const { ul: underline, st: strikethrough, ol: overline } = textStyle;
+        const { ul: underline, st: strikethrough, ol: overline, va: baselineOffset } = textStyle;
 
         if (underline) {
             const startY = contentHeight + DEFAULT_OFFSET_SPACING - 3;
@@ -64,9 +64,21 @@ export class Line extends docExtension {
         }
 
         if (strikethrough) {
-            // We use the asc baseline to find the position of the strikethrough,
-            // and ba - strikeoutPosition is exactly the offset position of the strikethrough from the baseline
-            const startY = asc - (ba - strikeoutPosition) - DELTA;
+            // strikethrough position is the middle of bounding box ascent and descent.
+            let startY = strikeoutPosition - DELTA;
+
+            /**
+             * --------- superscript strikethrough position -------
+             * --------- superscript offset -----------------------
+             * --------- baseline           -----------------------
+             * --------- subscript strikethrough position ---------
+             * --------- subscript offset   -----------------------
+             */
+            if (baselineOffset === BaselineOffset.SUPERSCRIPT) {
+                startY = asc + bd - spo - strikeoutPosition;
+            } else if (baselineOffset === BaselineOffset.SUBSCRIPT) {
+                startY = asc + bd + sbo - strikeoutPosition;
+            }
 
             this._drawLine(ctx, span, strikethrough, startY, scale);
         }
@@ -87,7 +99,7 @@ export class Line extends docExtension {
         span: IDocumentSkeletonGlyph,
         line: ITextDecoration,
         startY: number,
-        scale: number
+        _scale: number
     ) {
         const { s: show, cl: colorStyle, t: lineType, c = BooleanNumber.TRUE } = line;