Docs for Dense and tall languages

hectahertz · Dec 11, 2017 · 2870230 · 2870230
1 parent 56cd299
commit 2870230
Show file tree

Hide file tree

Showing 15 changed files with 146 additions and 6 deletions.
diff --git a/DENSE_TALL.md 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.
+
+<img alt="Material Design Dense" src="images/material-dense.png" width="750" height="734"/>
+<img alt="Material Design Tall" src="images/material-tall.png" width="750" height="739"/>
+
+### 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.
+
+<img alt="Human Interface Guidelines Dense" src="images/human-dense.png" width="750" height="864"/>
+<img alt="Human Interface Guidelines Tall" src="images/human-tall.png" width="750" height="879"/>
+
+### iOSUIKit
+
+```JSX
+import { iOSUIKitDense, iOSUIKitTall } from 'react-native-typography'
+```
+
+The adjustments here are minor and just to ensure proper rendering on all
+platforms.
+<img alt="iOSUIKit Dense" src="images/iosuikit-dense.png" width="750" height="943"/>
+<img alt="iOSUIKit Tall" src="images/iosuikit-tall.png" width="750" height="974"/>
+
+## 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.
+
+<img alt="System Dense Weights iOS" src="images/system-dense-ios.png" width="620" height="258"/>
+<img alt="System Dense Weights Android" src="images/system-dense-android.png" width="620" height="258"/>
+
+### 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.
+
+<img alt="System Tall Weights iOS" src="images/system-tall-ios.png" width="620" height="268"/>
+<img alt="System Tall Weights Android" src="images/system-tall-android.png" width="620" height="268"/>
+
+### 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.
+
+<img alt="Noto CJK Weights" src="images/noto-cjk.png" width="620" height="137"/>
+
+### 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.
+
+<img alt="Noto Tall Weights" src="images/noto-tall.png" width="620" height="137"/>
diff --git 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'
+
+<Text style={materialDense.display4}>你好排版！</Text>
+```
+
+<p align="center">
+<img alt="Material Design Collection" src="images/hello-world-chinese.png" width="190" height="70"/>
+</p>
+
 ## 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,10 +436,13 @@ 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
 * http://devsign.co/notes/tracking-and-character-spacing
 * 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
diff --git a/images/human-dense.png b/images/human-dense.png
diff --git a/images/human-tall.png b/images/human-tall.png
diff --git a/images/iosuikit-dense.png b/images/iosuikit-dense.png
diff --git a/images/iosuikit-tall.png b/images/iosuikit-tall.png
diff --git a/images/material-dense.png b/images/material-dense.png
diff --git a/images/material-tall.png b/images/material-tall.png
diff --git a/images/noto-cjk.png b/images/noto-cjk.png
diff --git a/images/noto-tall.png b/images/noto-tall.png
diff --git a/images/system-dense-android.png b/images/system-dense-android.png
diff --git a/images/system-dense-ios.png b/images/system-dense-ios.png
diff --git a/images/system-tall-android.png b/images/system-tall-android.png
diff --git a/images/system-tall-ios.png b/images/system-tall-ios.png