From 3f68158d69f3bf30c87b1d11618c7b86ccbb44a7 Mon Sep 17 00:00:00 2001 From: Ran Luo Date: Thu, 11 Apr 2024 11:32:16 +0800 Subject: [PATCH] fix(docs): strikethrough position is incorrect (#1836) * fix: strikethrough position is incorrect * refactor: strikethrough * fix: strikethrough --- examples/src/docs/main.ts | 4 +-- .../engine-render/src/basics/font-cache.ts | 13 +++++----- packages/engine-render/src/basics/tools.ts | 6 ++++- .../docs/extensions/font-and-base-line.ts | 18 +++---------- .../src/components/docs/extensions/line.ts | 26 ++++++++++++++----- 5 files changed, 37 insertions(+), 30 deletions(-) diff --git a/examples/src/docs/main.ts b/examples/src/docs/main.ts index cfb2d06a10..786c657e2e 100644 --- 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 index b2bcee6b69..4c678b0050 100644 --- 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 index 9d81a6d280..dc8e76ea35 100644 --- 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 index 96a6c93645..384c7f9b17 100644 --- 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 index 6e9761c539..dee7244ca8 100644 --- 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;