Text: Add CJK wrapping to Text (#3095)

docs/examples/text/cjkText.js

@@ -0,0 +1,82 @@
+// @flow strict
+import React, { type Node } from 'react';
+import { Box, Flex, Text } from 'gestalt';
+
+export default function cjkText(): Node {
+  const languages = [
+    {
+      id: 'English',
+      code: 'en',
+      lang: 'Your account options and more',
+    },
+    {
+      id: 'Chinese',
+      code: 'zh',
+      lang: '帐户和更多选项',
+    },
+    {
+      id: 'Korean',
+      code: 'ko',
+      lang: '계정 및추 가옵션',
+    },
+  ];
+
+  return (
+    <Box
+      padding={4}
+      width="100%"
+      height="100%"
+      display="flex"
+      alignItems="center"
+      direction="column"
+    >
+      <Flex direction="row" gap={8}>
+        <Flex gap={2} direction="column">
+          <Box>
+            <Text weight="bold">With Keep-All</Text>
+          </Box>
+          <Flex direction="column" gap={4}>
+            {languages.map(({ id, lang, code }) => (
+              <Box key={id}>
+                <Box marginBottom={2}>
+                  <Text size="200">{id}</Text>
+                </Box>
+                <div lang={code}>
+                  <Box key={id} width={120} color="dark" rounding={2} padding={2}>
+                    <Box width={24} color="dark">
+                      <Text overflow="normal" size="200" color="inverse">
+                        {lang}
+                      </Text>
+                    </Box>
+                  </Box>
+                </div>
+              </Box>
+            ))}
+          </Flex>
+        </Flex>
+
+        <Flex gap={2} direction="column">
+          <Box>
+            <Text weight="bold">Without Keep-All</Text>
+          </Box>
+          <Flex direction="column" gap={4}>
+            {languages.map(({ id, lang }) => (
+              <Box key={id}>
+                <Box marginBottom={2}>
+                  <Text size="200">{id}</Text>
+                </Box>
+                <Box key={id} width={70} color="dark" rounding={2} padding={2}>
+                  <Box width={24} color="dark">
+                    <Text overflow="normal" size="200" color="inverse">
+                      {lang}
+                    </Text>
+                  </Box>
+                </Box>
+              </Box>
+            ))}
+          </Flex>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}

docs/pages/web/text.js

@@ -9,6 +9,7 @@ import Page from '../../docs-components/Page.js';
 import PageHeader from '../../docs-components/PageHeader.js';
 import QualityChecklist from '../../docs-components/QualityChecklist.js';
 import SandpackExample from '../../docs-components/SandpackExample.js';
+import cjkText from '../../examples/text/cjkText.js';
 import doMinimalStyle from '../../examples/text/doMinimalStyle.js';
 import dontCenterAlign from '../../examples/text/dontCenterAlign.js';
 import dontMixStyles from '../../examples/text/dontMixStyles.js';
@@ -185,6 +186,21 @@ export default function TextPage({ generatedDocGen }: {| generatedDocGen: DocGen
           title="Text-wrapping and hyphenation"
           description="Hyphenation on iOS is turned off by default to avoid incorrect word breaks when strings of text wrap to the next line. This is especially helpful for international languages where an incorrect word break can greatly change the meaning of a word or sentence."
         />
+
+        <MainSection.Subsection
+          title="Word Breaks and CJK languages"
+          description={`Chinese, Japanese and Korean languages may be broken in the middle of a word. This creates text-wrapping issues and tall containers. To avoid this, Text uses the CSS property \`word-break:keep-all\` to keep words on CJK languages together when CJK is detected.  
+          <br /> Be sure to consider text overflow, and making sure a container is wide enough to support a CJK term.
+          `}
+        >
+          <SandpackExample
+            previewHeight={550}
+            code={cjkText}
+            name="CJK Text"
+            hideEditor
+            hideControls
+          />
+        </MainSection.Subsection>
       </MainSection>
       <MainSection name="Variants">
         <MainSection.Subsection

packages/gestalt/src/Text.css

@@ -1,3 +1,15 @@
 .Text {
   composes: antialiased sansSerif from "./Typography.css";
 }
+
+/**
+See keep-all usage for CJK languages. 
+If a language code is specified higher in the parent-tree, then this class is applied 
+https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
+**/
+
+*:lang(zh) .Text,
+*:lang(ko) .Text,
+*:lang(ja) .Text {
+  word-break: keep-all;
+}