site: Update FAQs section (#207)

seek-oss · Jun 24, 2024 · f772066 · f772066
1 parent 9d10414
commit f772066
Showing 1 changed file with 40 additions and 49 deletions.
diff --git a/site/src/components/FAQs.tsx b/site/src/components/FAQs.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Stack, Box, Text, Link, Code, List, ListItem } from '@chakra-ui/react';
+import { Stack, Box, Text, Link, Code } from '@chakra-ui/react';
 import dedent from 'dedent';
 
 import { useAppState } from '../components/AppStateContext';
@@ -30,10 +30,6 @@ const FAQs = () => {
     lineGap,
     metrics,
   } = state;
-  const displaySize =
-    textSizeStyle === 'capHeight'
-      ? capHeight
-      : Math.round(fontSize * (metrics.capHeight / metrics.unitsPerEm));
 
   let capsizeValues;
 
@@ -184,6 +180,7 @@ const FAQs = () => {
             <Link
               textDecoration="underline"
               href="https://en.wikipedia.org/wiki/Diacritic#Diacritics_specific_to_non-Latin_alphabets"
+              target="_blank"
             >
               Diacritics and accent marks
             </Link>{' '}
@@ -209,43 +206,27 @@ const FAQs = () => {
               Going forward, it would be great if this power was built into the
               platform and able to be applied through standard CSS properties.
               The{' '}
-              <Link textDecoration="underline" href="https://twitter.com/csswg">
+              <Link
+                textDecoration="underline"
+                href="https://twitter.com/csswg"
+                target="_blank"
+              >
                 CSS Working Group
               </Link>{' '}
-              have a number proposals/specifications that would simplify this
-              significantly.
-            </Text>
-            <Text as="span">
-              Relevant specifications include:
-              <List styleType="disc" stylePosition="inside">
-                <ListItem>
-                  <Link
-                    textDecoration="underline"
-                    href="https://github.com/w3c/csswg-drafts/issues/3240"
-                  >
-                    Leading control at start/end of block
-                  </Link>
-                </ListItem>
-                <ListItem>
-                  <Link
-                    textDecoration="underline"
-                    href="https://www.w3.org/TR/css-values-4/#cap"
-                  >
-                    Font relative unit{' '}
-                    <Code
-                      textDecoration="underline"
-                      bg="gray.200"
-                      color="gray.700"
-                      fontSize="medium"
-                    >
-                      cap
-                    </Code>
-                  </Link>
-                </ListItem>
-              </List>
+              have a specification proposal to make this available natively in
+              CSS (see{' '}
+              <Link
+                textDecoration="underline"
+                href="https://github.com/w3c/csswg-drafts/issues/3240"
+                target="_blank"
+              >
+                Leading control at start/end of block
+              </Link>
+              ).
             </Text>
             <Text>
-              These specifications would turn the CSS generated by Capsize into:
+              With this specification, the CSS required for trimming the line
+              box would be:
               <Code
                 display="block"
                 background="transparent"
@@ -255,21 +236,30 @@ const FAQs = () => {
               >
                 {css`
                   .capsizedText {
-                    font-size: ${displaySize}cap;
-                    line-height: ${capsizeValues &&
-                    'lineHeight' in capsizeValues
-                      ? Math.round(
-                          parseInt(
-                            capsizeValues.lineHeight.replace('px', ''),
-                            10,
-                          ),
-                        )
-                      : '78'}px;
-                    leading-trim: cap ideographic;
+                    text-box-edge: cap alphabetic;
+                    text-box-trim: both;
                   }
                 `}
               </Code>
             </Text>
+            <Text>
+              Since Capsize was first built,{' '}
+              <Link
+                textDecoration="underline"
+                href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#LOCAL%20FONT-RELATIVE%20LENGTHS:~:text=Relative%20to-,cap,-Cap%20height%20(the"
+                target="_blank"
+              >
+                <Code
+                  textDecoration="underline"
+                  bg="gray.200"
+                  color="gray.700"
+                  fontSize="medium"
+                >
+                  cap
+                </Code>
+              </Link>{' '}
+              units are now available natively in CSS across all major browsers.
+            </Text>
             <Text>
               Currently, there is no proposal for a way to define the{' '}
               <Code bg="gray.200" color="gray.700" fontSize="medium">
@@ -283,6 +273,7 @@ const FAQs = () => {
               <Link
                 textDecoration="underline"
                 href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap"
+                target="_blank"
               >
                 <Code
                   textDecoration="underline"