fix(android/text-base): remove extra font padding for custom fonts gl… #10771
Conversation
…obally Apply setIncludeFontPadding(false) in TextBase.initNativeView for all Android text-based views. This fixes the issue where custom and icon fonts appeared taller than expected due to Android's default font padding. The fix is global and backward compatible, so no manual workaround is needed in app code.\n\nCloses #<issue-number-if-applicable>
|
|
||
| // Fix for custom font over-height issue on Android | ||
| // Disable font padding to prevent extra spacing around text | ||
| nativeView.setIncludeFontPadding(false); |
There was a problem hiding this comment.
I'm curious @CatchABus do you see any issue with this fix?
|
@ahmedsalman74 Could you post screenshots of the problem from both platforms? According to android docs, this method: The extra padding for accents might be necessary and there's also a possibility that the widget itself has a native padding that's not removed using |
|
@CatchABus Here is what I get with this font icon: https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/fonts/tabler-icons-300.ttf 
I tried different fonts in the hello world project and some of them were rendered correctly and some not. In the screenshot the height for "font 1" is terrible and for "font 3" is slightly more than normal. It might be due to the wrong metrics set for this specific font? I'm not a font expert, I wonder why the height is correct on the web for all of these fonts but not on Android. If the problem is related only to this specific font and not others; then a generic fix might not be needed in the nativescript core? or we may need a property in styles or somewhere to enable or disable it per use case? |
|
Thank you for this @ahmedsalman74 we'll discuss what may be best in this case to include any adjustments for 9.0. |
|
@NathanWalker Here are the screenshots with the same fonts on iOS and web which is rendered correctly. 
Web: |
There was a problem hiding this comment.
Pull Request Overview
This PR addresses an Android-specific issue where custom fonts display with excessive height due to Android's default font padding behavior. The fix disables font padding globally at the framework level in the TextBase class initialization.
- Adds
setIncludeFontPadding(false)call inTextBase.initNativeView()to disable font padding for all text elements - Provides comprehensive documentation explaining the problem, solution, and migration guidance
- Claims the fix is backward compatible and applies to NativeScript 8.9.5+
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| packages/core/ui/text-base/index.android.ts | Adds global font padding disabling in TextBase initialization |
| docs/android-font-padding-fix.md | Comprehensive documentation covering the fix, alternatives, and migration guide |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
docs/android-font-padding-fix.md
Outdated
|
|
||
| Android's TextView components include font padding by default (`includeFontPadding="true"`). This padding adds extra space above and below text to accommodate font metrics, but it often creates unwanted visual spacing with custom fonts and icon fonts. | ||
|
|
||
| ## Solution: Global Framework Fix (NativeScript 8.9.5+) |
There was a problem hiding this comment.
The version number '8.9.5' appears incorrect. The package.json shows the current version is 9.0.0, and this is a new feature being added. The documentation should reference the correct version where this fix will be available (likely 9.0.0 or the next release version).
| ## Solution: Global Framework Fix (NativeScript 8.9.5+) | |
| ## Solution: Global Framework Fix (NativeScript 9.0.0+) |
docs/android-font-padding-fix.md
Outdated
|
|
||
| ## No Further Action Needed | ||
|
|
||
| **If you are using NativeScript 8.9.5 or later, this fix is applied globally and you do not need to manually set `setIncludeFontPadding(false)` on individual elements.** |
There was a problem hiding this comment.
The version number '8.9.5' is inconsistent with the package version (9.0.0) and should be corrected to reference the actual version where this feature is available.
docs/android-font-padding-fix.md
Outdated
| - [NativeScript Font Documentation](https://docs.nativescript.org/ui/styling#using-fonts) | ||
| - [Typography Best Practices](https://docs.nativescript.org/ui/styling#typography) | ||
|
|
||
| ### 3. Custom Component Solution |
There was a problem hiding this comment.
This heading '### 3. Custom Component Solution' appears out of context. It follows the 'References' section and suggests there should be sections '1.' and '2.' before it, but they don't exist in this part of the document. This creates structural confusion. Either remove the number or reorganize the document structure with proper section ordering.
| ### 3. Custom Component Solution | |
| ### Custom Component Solution |
docs/android-font-padding-fix.md
Outdated
| ### 4. CSS-Based Approach (Limited) | ||
|
|
||
| While CSS cannot directly control `includeFontPadding`, you can use CSS to compensate: | ||
|
|
||
| ```css | ||
| .custom-font { | ||
| font-family: "my-custom-font"; | ||
| font-weight: 400; | ||
| /* Adjust line-height to compensate for padding */ | ||
| line-height: 1.0; | ||
| /* Fine-tune vertical alignment */ | ||
| vertical-align: center; | ||
| } | ||
| ``` | ||
|
|
There was a problem hiding this comment.
Similar to the Custom Component Solution, this CSS-based workaround section (lines 95-108) is now obsolete with the global framework fix. It should be removed or clearly marked as unnecessary to avoid confusing users.
| ### 4. CSS-Based Approach (Limited) | |
| While CSS cannot directly control `includeFontPadding`, you can use CSS to compensate: | |
| ```css | |
| .custom-font { | |
| font-family: "my-custom-font"; | |
| font-weight: 400; | |
| /* Adjust line-height to compensate for padding */ | |
| line-height: 1.0; | |
| /* Fine-tune vertical alignment */ | |
| vertical-align: center; | |
| } | |
| ``` |
|
Thank you for the contribution @ahmedsalman74 💯 |
5 participants
Apply setIncludeFontPadding(false) in TextBase.initNativeView for all Android text-based views. This fixes the issue where custom and icon fonts appeared taller than expected due to Android's default font padding. The fix is global and backward compatible, so no manual workaround is needed in app code.\n\nCloses #
PR Checklist
Fixes/Implements/Closes #10769 .