Line height is distributed unevenly when lineHeight <= fontSize
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
Description
When lineHeight is less than the fontSize, Text shrinks the line's bounding box only by removing space from above the text, rather than distributing the space evenly above and below, as is done with extra line height. Actually, the issue manifests when lineHeight is less than fontSize plus some small amount (perhaps the font bounding box height?)—e.g. <= 45px for 40px Helvetica.
This leads to clipped glyphs and produces differences in text rendering between react-native-web and react-native (https://github.com/necolas/react-native-web/issues/1687). After some discussion with @necolas, my inclination is that RNW's behavior is the more reasonable one, so I thought I'd open an issue here.
This issue reproduces across a variety of fonts.

Unfortunately,I worry that fixing this issue will create subtle and surprising source compatibility issues for existing clients.
React Native version:
System:
OS: macOS 10.15.5
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 337.02 MB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.21.0 - ~/.nvm/versions/node/v10.21.0/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v10.21.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
Languages:
Java: 11.0.2 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: Not Found
react-native: 0.63.2 => 0.63.2
npmGlobalPackages:
*react-native*: Not Found
Steps To Reproduce
Run example app here: https://snack.expo.io/W51F2OAqD
Expected Results
The extra line spacing should be removed evenly from both above and below the type.
Snack, code example, screenshot, or link to a repository:
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit dem verlinkten Snack-Beispiel und dem Rendering-Pfad von React Native Text; vergleiche das Verhalten, wenn lineHeight bei oder unter fontSize liegt, über die beschriebenen Schriftarten hinweg. Bestätige das erwartete Ergebnis, indem du prüfst, ob zusätzlicher Abstand gleichmäßig oberhalb und unterhalb entfernt wird, ohne Glyphen abzuschneiden, und bewerte anschließend die im Issue erwähnten Auswirkungen auf die Quellkompatibilität.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react-native
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100