Skip to content
# Text ## Description BitText draws a run of text at one of the theme's named typography steps, so its size, weight, line height and tracking all come from the theme and every preset re-skins them at once. The look and the semantics stay separate decisions: the variant chooses how the text is drawn, Element the tag it is drawn in, and AriaLevel the heading level it is announced at. Everything else composes with any variant - the weight, the case, the italic, the underline and the strikethrough, the tabular figures, the alignment, the flat colors and the gradients, the trim of the box the text draws in, and the whole of the wrapping, from a single truncated line to a clamp of a given number of lines. ## Parameters | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Align | `BitTextAlign?` | null | Sets the horizontal alignment of the text content. Start and End follow the direction of the text, while Left and Right do not. | | AriaLevel | `int?` | null | Sets the level of the heading the text is announced as, without changing the rendered tag. On a tag that is not already a heading a heading role is written beside it. | | Block | `bool` | false | Renders the text as a block level element, which is what the inline variants need before they have a width to align inside or to truncate. | | BreakWord | `bool` | false | Breaks a word that is too long for its line rather than letting it overflow, leaving the words that do fit alone. | | ChildContent | `RenderFragment?` | null | The content of the text. It is not rendered where Element names a void element. | | Color | `BitColor?` | null | The general color of the text. | | Element | `string?` | null | The custom html element used for the root node. A value that is not a name a tag can have falls back to the tag of the typography variant. | | ForceBreak | `bool` | false | Forces the text to always break at the end. | | Foreground | `BitColorKind?` | null | The kind of the foreground color of the text. | | Gradient | `string?` | null | Paints the glyphs of the text with a CSS gradient instead of with a flat color. The value is written as the background-image of the element and clipped to the text, and the fill is taken away by itself. | | Gutter | `bool` | false | If true, the text will have a bottom margin, sized in em so that it follows the size of the variant. | | Hyphenate | `bool` | false | Hyphenates the words that are broken across two lines, which needs a Lang the browser carries a dictionary for. | | Italic | `bool` | false | Renders the text in italics. | | Lang | `string?` | null | The language of the text, written as the lang attribute of the rendered element. | | LineClamp | `int?` | null | Truncates the text after the given number of lines with an ellipsis. A value below one leaves the text alone. | | Monospace | `bool` | false | Renders the text in the theme's monospaced family, so that every character is drawn at the same width and a column of them lines up. | | NoSelect | `bool` | false | Prevents the text from being selected. | | NoWrap | `bool` | false | If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. | | Numeric | `bool` | false | Renders the digits of the text at a single width, so that they line up across the lines. | | PreserveWhitespace | `bool` | false | Renders the line breaks and the runs of spaces of the content as they were written, while the lines still too wide for the box go on wrapping. NoWrap has the last word over it. | | Strikethrough | `bool` | false | Draws a line through the text. It combines with Underline. | | Transform | `BitTextTransform?` | null | The capitalization of the text. The transform is visual only, so the characters in the document are the ones that were written. | | Trim | `BitTextTrim?` | null | Trims the half-leading off the top, the bottom or both edges of the box the text draws in, so that the gap around it is the one that was written. | | Typography | `BitTypography?` | null | The typography of the text. | | Underline | `bool` | false | Underlines the text. It combines with Strikethrough. | | VisuallyHidden | `bool` | false | Removes the text from the page while keeping it available to assistive technologies. | | Weight | `BitFontWeight?` | null | The font weight of the text. Left unset, the weight is the one the typography variant carries. | | Wrap | `BitTextWrap?` | null | How the lines of the text are broken. NoWrap and LineClamp have the last word over it. | | AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. | | Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. | | Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. | | ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. | | HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. | | Id | `string?` | null | Gets or sets the unique identifier for the component's root element. | | IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. | | Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. | | TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. | | Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. | ## Public Members | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. | | RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. | ## Enums ### BitColor Enum | Name | Value | Description | | :--- | :--- | :---------- | | Primary | 0 | Info Primary general color. | | Secondary | 1 | Secondary general color. | | Tertiary | 2 | Tertiary general color. | | Info | 3 | Info general color. | | Success | 4 | Success general color. | | Warning | 5 | Warning general color. | | SevereWarning | 6 | SevereWarning general color. | | Error | 7 | Error general color. | | PrimaryBackground | 8 | Primary background color. | | SecondaryBackground | 9 | Secondary background color. | | TertiaryBackground | 10 | Tertiary background color. | | PrimaryForeground | 11 | Primary foreground color. | | SecondaryForeground | 12 | Secondary foreground color. | | TertiaryForeground | 13 | Tertiary foreground color. | | PrimaryBorder | 14 | Primary border color. | | SecondaryBorder | 15 | Secondary border color. | | TertiaryBorder | 16 | Tertiary border color. | ### BitColorKind Enum | Name | Value | Description | | :--- | :--- | :---------- | | Primary | 0 | The primary color kind. | | Secondary | 1 | The secondary color kind. | | Tertiary | 2 | The tertiary color kind. | | Transparent | 3 | The transparent color kind. | ### BitFontWeight Enum | Name | Value | Description | | :--- | :--- | :---------- | | Light | 0 | The lightest step of the weight scale. | | Regular | 1 | The weight of body copy, and the default of nearly every typography variant. | | Medium | 2 | The step between the body copy and the titles. | | Semibold | 3 | The weight of the titles and of the labels of the interactive controls. | | Bold | 4 | The heaviest step of the weight scale. | ### BitTextAlign Enum | Name | Value | Description | | :--- | :--- | :---------- | | Start | 0 | Aligns to the leading edge of the text, whichever direction it runs in. | | End | 1 | Aligns to the trailing edge of the text, whichever direction it runs in. | | Left | 2 | Aligns to the left edge, whichever direction the text runs in. | | Right | 3 | Aligns to the right edge, whichever direction the text runs in. | | Center | 4 | Centers the lines inside the box. | | Justify | 5 | Spaces the words of every line but the last so that both edges line up. | | JustifyAll | 6 | Justifies the last line as well. No browser engine implements it yet. | | MatchParent | 7 | Inherits the alignment, resolving a start or an end against the direction of the parent. | | Inherit | 8 | Takes the alignment of the parent. | | Initial | 9 | Takes the initial value of the property. | | Revert | 10 | Reverts to the value the user agent or the user stylesheet sets. | | RevertLayer | 11 | Reverts to the value of the previous cascade layer. | | Unset | 12 | Inherits the alignment, or takes the initial value where it is not inherited. | ### BitTextTransform Enum | Name | Value | Description | | :--- | :--- | :---------- | | None | 0 | The text is rendered with the capitalization it was written in. | | Uppercase | 1 | Every character is rendered in upper case. | | Lowercase | 2 | Every character is rendered in lower case. | | Capitalize | 3 | The first character of every word is rendered in upper case. | ### BitTextTrim Enum | Name | Value | Description | | :--- | :--- | :---------- | | None | 0 | Neither half-leading is trimmed, which is what a line box does of its own. | | Start | 1 | The half-leading above the first line is trimmed, so that the top of the box is the cap height of the text. | | End | 2 | The half-leading below the last line is trimmed, so that the bottom of the box is the alphabetic baseline. | | Both | 3 | Both half-leadings are trimmed, so that the box is exactly as tall as the glyphs it draws. | ### BitTextWrap Enum | Name | Value | Description | | :--- | :--- | :---------- | | Wrap | 0 | The text is broken into lines the usual way. | | NoWrap | 1 | The text is not broken into lines at all and overflows its container instead. | | Balance | 2 | The lines are balanced so that they come out of a similar length. Engines only balance a short block. | | Pretty | 3 | The break points avoid leaving a short last line. This is the one for body copy. | | Stable | 4 | The lines already laid out keep their break points while the text after them is edited. | ### BitTypography Enum | Name | Value | Description | | :--- | :--- | :---------- | | H1 | 0 | Renders an h1. | | H2 | 1 | Renders an h2. | | H3 | 2 | Renders an h3. | | H4 | 3 | Renders an h4. | | H5 | 4 | Renders an h5. | | H6 | 5 | Renders an h6. | | Subtitle1 | 6 | Renders an h6. The default variant. | | Subtitle2 | 7 | Renders an h6. | | Body1 | 8 | Renders a p. | | Body2 | 9 | Renders a p. | | Button | 10 | Renders a span. | | Caption1 | 11 | Renders a span. | | Caption2 | 12 | Renders a span. | | Overline | 13 | Renders a span. | | Inherit | 14 | Renders a p, taking every typographic declaration from the element around it. | ### BitVisibility Enum | Name | Value | Description | | :--- | :--- | :---------- | | Visible | 0 | The content of the component is visible. | | Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). | | Collapsed | 2 | The component is hidden (display:none). | ### BitDir Enum | Name | Value | Description | | :--- | :--- | :---------- | | Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). | | Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). | | Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. | ## Examples \n**Basic**: ```razor This is default (Subtitle1) H1. Heading H2. Heading H3. Heading H4. Heading H5. Heading H6. Heading Subtitle1. Once upon a time Subtitle2. Once upon a time Body1. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. Body2. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. Button. Click Me Caption1. Hello World! Caption2. Hello World! Overline. this is overline text.
Inherit. Takes the size, the weight and the family of the element around it.
``` \n**Element**: ```razor An h2 drawn at the size of an h4 An h4 look with no heading semantics at all (span) Strongly emphasized body text A quotation, in a blockquote var text = new BitText(); A tag name carrying whitespace falls back to the tag of the variant (p). A void element holds no content, so this text is not rendered. ``` \n**Weight & emphasis**: ```razor Light weight Regular weight Medium weight Semibold weight Bold weight Italic text Underlined text Struck through text Both underlined and struck through Uppercase transform Lowercase Transform capitalize transform None, undoing the uppercase of the overline variant ``` \n**Numbers & monospace**: ```razor 1,111.11 8,888.88 1,234.56 1,111.11 8,888.88 1,234.56 1,111.11 8,888.88 1,234.56 var text = new BitText { Monospace = true }; sha256:3f7a91c0b2ed48d5 ``` \n**Wrapping**: ```razor Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. Once upon a time, stories wove connections between people, a symphony of voices. A path: /a/very/long/path/segment/that/never/breaks/on/its/own/anywhere.txt 1234567890123456789012345678901234567890123456789012345678901234567890 A heading whose lines are balanced against each other Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. An incomprehensibly complicated internationalization responsibility. @(@"Dear reader, Two blank lines and an indent survive, and a line this long is still wrapped.") ``` \n**Line clamp**: ```razor Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams that outlasted every one of the nights they were told in. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams that outlasted every one of the nights they were told in. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams that outlasted every one of the nights they were told in. ``` \n**Align**: ```razor Start Center End Justify. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. ``` \n**Gutter**: ```razor A heading with a gutter A paragraph with a gutter, whose margin is smaller because the variant is. A paragraph with none. ``` \n**Trim**: ```razor
Handgloves
Handgloves
Handgloves
Handgloves
``` \n**Accessibility**: ```razor A div announced as a level 3 heading An h2 announced as a level 4 heading Read out by a screen reader, and drawn nowhere. Try to select this text - it will not be selected. ``` \n**Visibility & disabled**: ```razor Visible text Hidden text Collapsed text A disabled run of text A disabled run of text, keeping its error color ``` \n**Foreground**: ```razor Primary foreground Secondary foreground Tertiary foreground
Transparent foreground
``` \n**Gradient**: ```razor A gradient headline Three stops, on a diagonal A radial gradient, and a weight of its own A run of body text fading out into nothing ``` \n**Cascading parameters**: ```razor @* The params object carries a default down to every text under it, and never overwrites what one set itself. *@ Takes the variant, the color and the transform from the cascade So does this one, without repeating any of it Its own color and weight, the cascaded variant Outside the cascade, and back to the defaults @code { private readonly BitTextParams[] textParams = [ new() { Typography = BitTypography.Body1, Color = BitColor.Info, Transform = BitTextTransform.Uppercase, } ]; } ``` \n**Color**: ```razor Primary color Secondary color Tertiary color Info color Success color Warning color SevereWarning color Error color PrimaryBackground color SecondaryBackground color TertiaryBackground color PrimaryForeground color SecondaryForeground color TertiaryForeground color PrimaryBorder color SecondaryBorder color TertiaryBorder color ``` \n**Style & Class**: ```razor Styled through the Style parameter Classed through the Class parameter A splatted class, kept beside the class and the alignment the component builds ``` \n**RTL**: ```razor این یک عنوان راست‌چین است این متن از لبه‌ی آغازین چیده شده است. این متن از لبه‌ی پایانی چیده شده است. ```