ネイティブ機能を使用した、カスタムスタイルのスクロール可能なエリアです。
活字組版の3つの基本的な側面は、可読性、読みやすさ、そして美しさです。非専門的な意味では「可読性」と「読みやすさ」はしばしば同義的に用いられますが、活字組版においては別個ながら関連する概念です。
可読性とは、個々の文字がお互いにどれくらい容易に区別できるかを表します。ウォルター・トレイシーはこれを「解読可能で認識できるという性質」と表現しています。例えば、「b」と「h」、または「3」と「8」を小さなサイズで区別するのが難しい場合、これは可読性の問題です。
活字組版技術者は、使用する適切なフォントを選択することが仕事であるため、可読性に配慮します。「Brush Script」は、多くの文字を区別するのが難しい可能性のあるフォントの一例です。大文字のみを使用する（すべて大文字）と可読性が低下するため、大文字・小文字の選択は活字組版の可読性に影響を与えます。
<ScrollArea type="always" scrollbars="vertical" style={{ height: 180 }}>
<Box p="2" pr="8">
<Heading size="4" mb="2" trim="start">
Principles of the typographic craft
</Heading>
<Flex direction="column" gap="4">
<Text as="p">
Three fundamental aspects of typography are legibility, readability, and
aesthetics. Although in a non-technical sense “legible” and “readable”
are often used synonymously, typographically they are separate but
related concepts.
</Text>
<Text as="p">
Legibility describes how easily individual characters can be
distinguished from one another. It is described by Walter Tracy as “the
quality of being decipherable and recognisable”. For instance, if a “b”
and an “h”, or a “3” and an “8”, are difficult to distinguish at small
sizes, this is a problem of legibility.
</Text>
<Text as="p">
Typographers are concerned with legibility insofar as it is their job to
select the correct font to use. Brush Script is an example of a font
containing many characters that might be difficult to distinguish. The
selection of cases influences the legibility of typography because using
only uppercase letters (all-caps) reduces legibility.
</Text>
</Flex>
</Box>
</ScrollArea>
このコンポーネントは、ScrollAreaプリミティブのルートおよびビューポート部分からプロパティを継承します。共通のマージンプロパティをサポートしています。
| プロパティ | 型 | デフォルト値 |
|---|---|---|
asChild | boolean | デフォルト値なし |
size | Responsive<"1" | "2" | "3"> | "1" |
radius | "none" | "small" | "medium" | "large" | "full" | デフォルト値なし |
scrollbars | "vertical" | "horizontal" | "both" | "both" |
sizeプロパティを使用して、スクロールバーハンドルのサイズを制御します。
<Flex direction="column" gap="2">
<ScrollArea
size="1"
type="always"
scrollbars="horizontal"
style={{ width: 300, height: 12 }}
>
<Box width="800px" height="1px" />
</ScrollArea>
<ScrollArea
size="2"
type="always"
scrollbars="horizontal"
style={{ width: 350, height: 16 }}
>
<Box width="900px" height="1px" />
</ScrollArea>
<ScrollArea
size="3"
type="always"
scrollbars="horizontal"
style={{ width: 400, height: 20 }}
>
<Box width="1000px" height="1px" />
</ScrollArea>
</Flex>
radiusプロパティを使用して、ハンドルに特定の角丸を割り当てます。
<Flex direction="column" gap="3">
<ScrollArea
radius="none"
type="always"
scrollbars="horizontal"
style={{ width: 350, height: 20 }}
>
<Box width="800px" height="1px" />
</ScrollArea>
<ScrollArea
radius="full"
type="always"
scrollbars="horizontal"
style={{ width: 350, height: 20 }}
>
<Box width="800px" height="1px" />
</ScrollArea>
</Flex>
scrollbarsプロパティを使用して、スクロール可能な軸を制限します。
<Grid columns="2" gap="2">
<ScrollArea type="always" scrollbars="vertical" style={{ height: 150 }}>
<Flex p="2" pr="8" direction="column" gap="4">
<Text size="2" trim="both">
Three fundamental aspects of typography are legibility, readability, and
aesthetics. Although in a non-technical sense "legible" and "readable"
are often used synonymously, typographically they are separate but
related concepts.
</Text>
<Text size="2" trim="both">
Legibility describes how easily individual characters can be
distinguished from one another. It is described by Walter Tracy as "the
quality of being decipherable and recognisable". For instance, if a "b"
and an "h", or a "3" and an "8", are difficult to distinguish at small
sizes, this is a problem of legibility.
</Text>
</Flex>
</ScrollArea>
<ScrollArea type="always" scrollbars="horizontal" style={{ height: 150 }}>
<Flex gap="4" p="2" width="700px">
<Text size="2" trim="both">
Three fundamental aspects of typography are legibility, readability, and
aesthetics. Although in a non-technical sense "legible" and "readable"
are often used synonymously, typographically they are separate but
related concepts.
</Text>
<Text size="2" trim="both">
Legibility describes how easily individual characters can be
distinguished from one another. It is described by Walter Tracy as "the
quality of being decipherable and recognisable". For instance, if a "b"
and an "h", or a "3" and an "8", are difficult to distinguish at small
sizes, this is a problem of legibility.
</Text>
</Flex>
</ScrollArea>
</Flex>