From ec7fa5d05e68f7ee2bc6025aa8f0af7309e5ff92 Mon Sep 17 00:00:00 2001 From: Dimitris-Rafail Katsampas Date: Thu, 31 Oct 2024 23:40:23 +0200 Subject: [PATCH] fix(core): proper line-height calculation (#10642) --- .../core/platforms/ios/src/UIView+NativeScript.m | 6 ++++-- packages/core/ui/styling/style-properties.d.ts | 1 - packages/core/ui/text-base/index.android.ts | 14 ++++++++++++-- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/core/platforms/ios/src/UIView+NativeScript.m b/packages/core/platforms/ios/src/UIView+NativeScript.m index f288aeaa5..bc2fb2123 100644 --- a/packages/core/platforms/ios/src/UIView+NativeScript.m +++ b/packages/core/platforms/ios/src/UIView+NativeScript.m @@ -26,7 +26,8 @@ BOOL isTextView = [self isKindOfClass:[UITextView class]]; if (lineHeight > 0) { NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init]; - paragraphStyle.lineSpacing = lineHeight; + // Note: Avoid using lineSpacing as it will append the height as extra space + paragraphStyle.minimumLineHeight = lineHeight; // make sure a possible previously set text alignment setting is not lost when line height is specified if ([self isKindOfClass:[UIButton class]]) { paragraphStyle.alignment = ((UIButton*)self).titleLabel.textAlignment; @@ -88,7 +89,8 @@ BOOL isLabel = [self isKindOfClass:[UILabel class]]; if (lineHeight > 0) { NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init]; - paragraphStyle.lineSpacing = lineHeight; + // Note: Avoid using lineSpacing as it will append the height as extra space + paragraphStyle.minimumLineHeight = lineHeight; // make sure a possible previously set text alignment setting is not lost when line height is specified if ([self isKindOfClass:[UIButton class]]) { paragraphStyle.alignment = ((UIButton*)self).titleLabel.textAlignment; diff --git a/packages/core/ui/styling/style-properties.d.ts b/packages/core/ui/styling/style-properties.d.ts index 61f99e3d0..ab19aac51 100644 --- a/packages/core/ui/styling/style-properties.d.ts +++ b/packages/core/ui/styling/style-properties.d.ts @@ -77,7 +77,6 @@ export const minWidthProperty: CssProperty; export const widthProperty: CssAnimationProperty; export const heightProperty: CssAnimationProperty; -export const lineHeightProperty: CssProperty; export const marginProperty: ShorthandProperty; export const marginLeftProperty: CssProperty; export const marginRightProperty: CssProperty; diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts index cb538617b..955be17d6 100644 --- a/packages/core/ui/text-base/index.android.ts +++ b/packages/core/ui/text-base/index.android.ts @@ -374,10 +374,20 @@ export class TextBase extends TextBaseCommon { } [lineHeightProperty.getDefault](): number { - return this.nativeTextViewProtected.getLineSpacingExtra() / layout.getDisplayDensity(); + return this.nativeTextViewProtected.getLineHeight() / layout.getDisplayDensity(); } [lineHeightProperty.setNative](value: number) { - this.nativeTextViewProtected.setLineSpacing(value * layout.getDisplayDensity(), 1); + const dpValue = value * layout.getDisplayDensity(); + + if (SDK_VERSION >= 28) { + this.nativeTextViewProtected.setLineHeight(dpValue); + } else { + const fontHeight = this.nativeTextViewProtected.getPaint().getFontMetricsInt(null); + // Actual line spacing is the diff of line height and font height + const lineSpacing = Math.max(dpValue - fontHeight, 0); + + this.nativeTextViewProtected.setLineSpacing(lineSpacing, 1); + } } [fontInternalProperty.getDefault](): android.graphics.Typeface {