diff --git a/DENSE_TALL.md b/DENSE_TALL.md new file mode 100644 index 0000000..41cb982 --- /dev/null +++ b/DENSE_TALL.md @@ -0,0 +1,112 @@ +# Dense and tall scripts + +## Collections + +We provide the necessary adjustments for the predefined collections for both +dense and tall scripts. They have the exact same properties as the other +collections. + +You can check the language categories reference in the +[Material Design page](https://material.io/guidelines/style/typography.html#typography-language-categories-reference). + +### Material Design + +```JSX +import { materialDense, materialTall } from 'react-native-typography' +``` + +The adjustments made are based on the +[Material Design guidelines](https://material.io/guidelines/style/typography.html) +for dense and tall scripts. + +Material Design Dense +Material Design Tall + +### Human Interface Guidelines + +```JSX +import { humanDense, humanTall } from 'react-native-typography' +``` + +The adjustments here are minor and just to ensure proper rendering on all +platforms. + +Human Interface Guidelines Dense +Human Interface Guidelines Tall + +### iOSUIKit + +```JSX +import { iOSUIKitDense, iOSUIKitTall } from 'react-native-typography' +``` + +The adjustments here are minor and just to ensure proper rendering on all +platforms. +iOSUIKit Dense +iOSUIKit Tall + +## Weight helpers + +The weight helpers for dense and tall scripts are different, as they render +using different fonts and weights on each platform. + +On iOS the San Francisco font is used for all scripts. + +On Android the Noto font is used to render the dense and tall scripts, in two +variants. + +The System weights render visually similar weights of the **San Francisco/Noto +typefaces** on each platform. + +### System Dense Weights + +```JSX +import { systemDenseWeights } from 'react-native-typography' +``` + +Not all dense languages have every weight in iOS or on Android, we try to match +it to the closer existing value, but ultimately every weight might fall back to +regular or bold depending on what's available. + +System Dense Weights iOS +System Dense Weights Android + +### System Tall Weights + +```JSX +import { systemTallWeights } from 'react-native-typography' +``` + +Noto Sans only has two weight values for tall scripts, so we fall back to the +closest value. For iOS there are some other weights available depending on the +language. + +System Tall Weights iOS +System Tall Weights Android + +### Noto CJK Weights + +```JSX +import { notoCJKWeights } from 'react-native-typography' +``` + +These weights are **only functional on Android**, as they directly reference the +native Noto CJK typeface. + +Noto Sans CJK has seven weight values originally, but they are not shipped with +Android for now, so we only have regular and bold. + +Noto CJK Weights + +### Noto Tall Weights + +```JSX +import { notoTallWeights } from 'react-native-typography' +``` + +These weights are **only functional on Android**, as they directly reference the +native Noto typeface. + +For the tall scripts there is only regular and bold available. + +Noto Tall Weights diff --git a/README.md b/README.md index e51a43d..70d9ac9 100644 --- a/README.md +++ b/README.md @@ -282,6 +282,20 @@ const styles = StyleSheet.create({ This is already taken care of on the collections, but if you want to define your own sizes you can adjust the spacing with this helper. +## Dense and tall scripts + +Dense and tall scripts are fully supported, check [the full documentation here!](DENSE_TALL.md) + +```JSX +import { materialDense } from 'react-native-typography' + +你好排版！ +``` + +

+Material Design Collection +

+ ## Cross-platform Quoting @@ -317,7 +331,8 @@ platforms: Absolutely! The helpers are very convenient to build your own text styles as they work around [the quirks of working with text styles on React Native](https://medium.com/@martin_adamko/react-native-quirks-2fb1ae0bbf80), -even if you want to specify your own sizes and weights, [check them out!](#customization-helpers) +even if you want to specify your own sizes and weights, +[check them out!](#customization-helpers) #### The Roboto typeface line heights are not 100% accurate to the Material Styles definition @@ -330,11 +345,24 @@ accurate once it gets released. #### Kerning is not 100% accurate on the Display sizes for the Material styles on Android -There's no support for letter spacing on React Native Android yet ☹️ +There's no support for letter spacing on React Native Android yet. ☹️ #### Where is Roboto Black? -It's not available by default on React Native yet 😐 +It's not available by default on React Native Android yet. 😐 + +#### Why are there less weights available for CJK(Chinese, Japanese, Korean) languages on Android than iOS? + +Android uses Noto Sans CJK (also known as Source Han Sans) to render those +languages, and +[even though it has seven weights](https://material.io/guidelines/style/typography.html#typography-typeface), +they're not shipped with Android. 😕 + +There are some issues tracking this already, hopefully they will be included in +the future. + +* https://issuetracker.google.com/issues/37064674 +* https://issuetracker.google.com/issues/37106325 #### I use styled-components/glamorous/etc. Can I use react-native-typography? @@ -358,9 +386,6 @@ define them and just supply the desired styles from the library! 🙂 ## Roadmap -* Support for - [dense and tall scripts](https://material.io/guidelines/style/typography.html#typography-line-height) - on the Material collection. * Type with [Flow](https://flow.org/) ## Versioning @@ -411,6 +436,7 @@ This project is licensed under the MIT License. * https://facebook.github.io/react-native/docs/text.html#style * https://medium.com/@knoland/typography-in-react-native-f09c43b5b435 * https://developer.apple.com/videos/play/wwdc2015/804/ +* https://developer.apple.com/videos/play/wwdc2016/801/ * https://medium.com/react-native-training/list-of-available-react-native-fonts-ed78b48bd45e * https://developer.apple.com/documentation/uikit/uifontdescriptor/font_weights * https://v1.designcode.io/iosdesign-guidelines @@ -418,3 +444,5 @@ This project is licensed under the MIT License. * https://www.raizlabs.com/dev/2015/08/advanced-ios-typography/ * https://medium.com/@sauvik_dolui/handling-fonts-in-ios-development-a-simpler-way-32d360cdc1b6 * https://readymag.com/arzamas/132908/6/ +* https://github.com/facebook/react-native/pull/14609 +* https://github.com/react-native-training/react-native-fonts diff --git a/images/hello-world-chinese.png b/images/hello-world-chinese.png new file mode 100644 index 0000000..862ec50 Binary files /dev/null and b/images/hello-world-chinese.png differ diff --git a/images/human-dense.png b/images/human-dense.png new file mode 100644 index 0000000..0e8e2a8 Binary files /dev/null and b/images/human-dense.png differ diff --git a/images/human-tall.png b/images/human-tall.png new file mode 100644 index 0000000..8d5b204 Binary files /dev/null and b/images/human-tall.png differ diff --git a/images/iosuikit-dense.png b/images/iosuikit-dense.png new file mode 100644 index 0000000..af02e1f Binary files /dev/null and b/images/iosuikit-dense.png differ diff --git a/images/iosuikit-tall.png b/images/iosuikit-tall.png new file mode 100644 index 0000000..a93ac84 Binary files /dev/null and b/images/iosuikit-tall.png differ diff --git a/images/material-dense.png b/images/material-dense.png new file mode 100644 index 0000000..1c053a1 Binary files /dev/null and b/images/material-dense.png differ diff --git a/images/material-tall.png b/images/material-tall.png new file mode 100644 index 0000000..6d5e35b Binary files /dev/null and b/images/material-tall.png differ diff --git a/images/noto-cjk.png b/images/noto-cjk.png new file mode 100644 index 0000000..ebf0f1a Binary files /dev/null and b/images/noto-cjk.png differ diff --git a/images/noto-tall.png b/images/noto-tall.png new file mode 100644 index 0000000..ec1c61d Binary files /dev/null and b/images/noto-tall.png differ diff --git a/images/system-dense-android.png b/images/system-dense-android.png new file mode 100644 index 0000000..36171ac Binary files /dev/null and b/images/system-dense-android.png differ diff --git a/images/system-dense-ios.png b/images/system-dense-ios.png new file mode 100644 index 0000000..f5e4f93 Binary files /dev/null and b/images/system-dense-ios.png differ diff --git a/images/system-tall-android.png b/images/system-tall-android.png new file mode 100644 index 0000000..ab4024e Binary files /dev/null and b/images/system-tall-android.png differ diff --git a/images/system-tall-ios.png b/images/system-tall-ios.png new file mode 100644 index 0000000..cad2202 Binary files /dev/null and b/images/system-tall-ios.png differ