react / react/react-native

textTransform Capitalize Does Not Behave As it Does in CSS

オープン
#34,117 コメント 6 件 リアクション 2 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Issue: Author Provided Repro
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

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

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

リンクされた Snack から始め、その Text コンポーネントの出力を、リンクされた MDN の CSS の動作と比較します。iOS と Android で Text のスタイル prop である textTransform がどのように処理されるかを追跡し、"PSYCHED." のような大文字と小文字が混在する単語のカバレッジを追加します。capitalize が先頭の文字だけを変更し、既存の大文字を両方のプラットフォームで保持すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
css, react-native
領域
mobile-dev
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。