textTransform Capitalize Does Not Behave As it Does in CSS
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 using textTransform: 'capitalize' on a Text component in RN, if there are any characters after the first character in a given word which were already upper-case, they are then converted to lower-case. For example: "I am PSYCHED about react native" becomes, "I Am Psyched About React Native." When using CSS on the web, the result of applying the same property value on the same source text would be, "I Am PSYCHED About React Native," leaving characters which are already upper-case as they are.
This difference is observable both in iOS and Android simulators, as well as on an iOS physical device (an Android physical device was not available for testing).
I understand that React Native style props are not meant to be absolutely equivalent to CSS, but it is my understanding that the intent of the project was to create an environment which was as familiar to web developers as possible. And it sure would be nice if they behaved the same way in both environments.
If there are a significant number of users who prefer the RN implementation to the way it is implemented in CSS, certainly one solution might be to add another option for the enum (maybe "pure-capitalize," for example) so that developers could have it whichever way they like.
Version
0.64.3
Output of npx react-native info
System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Memory: 21.95 MB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8309675
Xcode: 11.3.1/11C505 - /usr/bin/xcodebuild
Languages:
Java: 11.0.15.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
Add the textTransform: 'capitalize' property to any Text component for which the source text contains an upper-case character in a word at some position after the initial character.
Snack, code example, screenshot, or link to a repository
Link to snack that reproduces the issue: https://snack.expo.dev/@duckandbeaver/texttransformnotlikecss
This MDN page shows how the similar property value behaves in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
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 und vergleiche die Ausgabe seiner Text-Komponente mit dem verlinkten MDN-CSS-Verhalten. Verfolge, wie die Text-Style-Prop textTransform unter iOS und Android verarbeitet wird, und füge Abdeckung für Wörter mit gemischter Groß-/Kleinschreibung wie "PSYCHED." hinzu. Als erledigt gilt dies, wenn capitalize nur das Anfangszeichen ändert und vorhandene Großbuchstaben auf beiden Plattformen beibehält.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- css, react-native
- Bereich
- mobile-dev
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100