Skip to content
BlazorUI

Notifications

Message

Bit.BlazorUIAlertMessageBar

An inline message that reports an error, a warning, or something worth knowing - a failed upload, an expiring licence, a saved draft - in place and without interrupting the page. Its color sets the palette, the icon and how urgently it is announced; it can carry a title and actions, fold long text away, and dismiss itself by button, key, timer or code.

Notes

Never let the color carry the meaning on its own: the text has to say what happened (or IconAriaLabel has to), and a warning or an error should offer a way forward through Actions.

AutoDismissTime is a time limit: keep it for confirmations that need no answer, and let anything with an action in it wait to be dismissed by hand. Keep AutoFocus for messages that have to be acted upon; the rest are announced by their live region.

A message that removes itself takes the focus with it if its dismiss button had it. Where that matters, move the focus somewhere deliberate from OnDismiss.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

A message needs only its content. It fills its container and uses the Info color and icon by default.

This is a Message.

Variant

Fill (the default) paints the surface, Outline keeps only the border, and Text colors the text alone. Without a fill the color is shaded toward the foreground, so the text keeps a 4.5:1 contrast on the page. Tinted washes the surface of Outline or Text with a faint tint of the color - the soft look.

Fill
Outline
Text
Outline, Tinted
Text, Tinted

Multiline

By default the content is clipped to one line. Multiline lets it wrap, and MaxLines caps the wrap, ending the last line with an ellipsis. AutoMultiline keeps one line where it fits and wraps only where it does not, so nothing is cut off on a narrow screen (WCAG 1.4.10 Reflow).

Fourteen of the 320 rows could not be imported because their Email column was empty or held a value the address parser did not recognize. Every other row was imported and is already visible in the contacts list. Download the report to see which rows were left out, fix them in place, and run the import again - the rows that went through the first time are skipped rather than duplicated.
Held to two lines by MaxLines. Your workspace is using 19.4 GB of its 20 GB. New uploads will start to fail once the limit is reached, and shared links to files already in the workspace will keep working. Remove the files you no longer need, or move them to an archive, to free the space back up.

Clipped: the import finished, and 14 of its 320 rows need your attention.
AutoMultiline: the import finished, and 14 of its 320 rows need your attention.

Truncate

Truncate adds a button that unfolds the clipped content, rendered only while something is actually clipped; on a Multiline message it needs a MaxLines cap. Expanded is two-way bindable, and ExpandAsync, CollapseAsync and ToggleExpandAsync do the same from code.

Bound through Expanded. Fourteen of the 320 rows could not be imported because their Email column was empty or held a value the address parser did not recognize. Every other row was imported and is already visible in the contacts list.

Driven by its methods. Fourteen of the 320 rows could not be imported because their Email column was empty or held a value the address parser did not recognize. Every other row was imported and is already visible in the contacts list.

Capped at two lines, then unfolded by the button. Your workspace is using 19.4 GB of its 20 GB. New uploads will start to fail once the limit is reached, and shared links to files already in the workspace will keep working. Remove the files you no longer need, or move them to an archive, to free the space back up.

Title

Title leads the content on a single line and sits above it on a Multiline message. TitleTemplate takes markup, and TitleElement renders the title as a heading (h2 ... h6) that screen readers can jump to, without changing its look.

Heads up
Your session expires in 5 minutes.
Upload failed
The file report-2024.xlsx could not be uploaded because it exceeds the 25 MB limit. Compress the file or split it into parts and try again.
Saved to your workspace
Everyone with access to the workspace can see this version now.

A title that is a heading

Rendered as an h3, so it shows up in the heading list of a screen reader.

Alignment, Square & Elevation

Alignment places a short content along the width. Square drops the rounded corners for an edge-to-edge banner. Elevation lifts the message with one of the theme's 24 shadows; other values leave it flat.

Start
Center
End


Elevated message

Dismiss

Dismissible adds the dismiss button and lets the message remove itself; bind Dismissed to follow or undo that. OnDismiss also adds the button but leaves the removal to its handler. DismissOnEscape adds the Escape key. OnDismissing runs first: set Cancel to keep the message, and read Reason to know what triggered it. DismissAsync dismisses from code.

Dismissible removes itself, no handler needed.

OnDismiss reports the dismissal; its handler removes the message.

Press the button, or focus it and press Escape: the first attempt is refused. Attempts: 0

Dismissed from outside by DismissAsync.

Auto-dismiss

AutoDismissTime dismisses the message after a delay. The countdown holds while a mouse or pen is over the message or the focus is inside it (WCAG 2.2.1); PauseOnPageHidden and PauseOnWindowBlur hold it while the page is not being looked at, and PauseAutoDismiss / ResumeAutoDismiss hold it from code. ShowAutoDismissProgress draws it as a bar. It starts over when the time changes, when the message comes back, and when OnDismissing cancels it.

Gone in five seconds. Hover me to hold the countdown.

Ten seconds, drawn along the bottom edge. Switch to another tab or window and it waits for you.

Fifteen seconds and no button: a Dismissed binding alone counts down too.

Actions

Actions holds the controls that resolve the message. They share the line on a single-line message and get a row of their own, which wraps, on a Multiline one - or on an AutoMultiline one whose line runs out of room. They sit outside the announced text, so an icon-only action needs its own AriaLabel.

A draft of this page was recovered from your last session.
One of three notices, with icon-only actions to step through them. The expander and the dismiss button stay beside the actions: fourteen of the 320 rows could not be imported because their Email column was empty or held a value the address parser did not recognize.

Icons

IconName replaces the severity icon, DismissIconName the dismiss glyph, and ExpandIconName / CollapseIconName the expander's. IconTemplate puts any markup, such as a spinner, in the icon's place. HideIcon removes it; do that only where the text already says what kind of message it is.

A custom icon.
A custom dismiss icon.
Custom expand and collapse icons. Fourteen of the 320 rows could not be imported because their Email column was empty or held a value the address parser did not recognize.
A spinner in place of the icon, through IconTemplate.
No icon.

Accessibility

The text is a live region: Warning, SevereWarning and Error announce as an interrupting alert, every other color as a polite status.
  • Role replaces the role ("none" silences it); Politeness changes only the urgency (aria-live).
  • IconAriaLabel says what the hidden icon means, ahead of the text.
  • DelayedAnnouncement fills the live region one render after it appears, so a message shown in answer to an action is reliably announced.
  • AutoFocus takes the focus to the message, and FocusAsync does it from code; a focusable message is described by its own text.
  • A titled message is a group named by its title, and its buttons are described by it, so each "Dismiss" is told apart.
Error-colored but reporting no error: announced politely as a status.
Part of the page rather than news about it: not announced at all.



A message with a TabIndex can be focused on demand.

Disabled

With Disabled the text stays readable and announced, but the buttons and the Escape key stop working and no countdown runs; enabling it again starts the countdown over. The public methods still work.

Cascading parameters

BitParams with a BitMessageParams sets defaults for every message under it; a message's own value always wins. The content, the state, the callbacks and what a message says about itself (Role, Politeness, IconAriaLabel, AutoFocus) are not cascaded.

Your changes were saved.

Color

Color sets the palette, the default icon and the urgency of the announcement. The semantic colors report a severity; the background, foreground and border colors match a surface instead. Every color works with every variant, tinted or not.


Primary.
Secondary.
Tertiary.
Info (default).
Success.
PrimaryBackground.
SecondaryBackground.
TertiaryBackground.
PrimaryForeground.
SecondaryForeground.
TertiaryForeground.
PrimaryBorder.
SecondaryBorder.
TertiaryBorder.

External Icons

Icon, DismissIcon, ExpandIcon and CollapseIcon take a BitIconInfo for an external icon library: use the Fa, Bi and Css helpers, or a plain class string.

FontAwesome icon (Icon="fa-solid fa-circle-info")
Bootstrap icon (Icon="BitIconInfo.Bi("check-circle-fill")")

Size

Size scales the type, the icon, the insets, the buttons and the countdown track together.

Small
Medium
Large

Style & Class

Style and Class land on the root; Styles and Classes reach each part of the message.

Styled message.
Classed message.

RTL

Dir="BitDir.Rtl" mirrors the message: the icon moves to the right, the buttons to the left.

پیام خبری (پیش فرض). به وبسایت ما سر بزنید.
پیام موفق. به وبسایت ما سر بزنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitMessage CSS variables

Name Default value Description
--bit-Message-color --bit-clr-inf-text (Fill); --bit-clr-inf-fg (Outline, Text) Color of the text, the icon and the buttons. The Color parameter wins over it.
--bit-Message-background --bit-clr-inf (Fill), --bit-clr-inf-tint (Outline and Text with Tinted), transparent (Outline, Text) Background of the surface. The Color parameter wins over it in Fill and Tinted; the transparent background of Outline and Text is its alone.
--bit-Message-border-color --bit-clr-inf (Fill, Outline), transparent (Text) Color of the border. The Color parameter wins over it, except over the transparent border of Text.
--bit-Message-border-width --bit-shp-brd-width Thickness of the border; four values draw a single side, e.g. an accent bar.
--bit-Message-radius --bit-shp-radius-surface Corner radius of the surface and of the countdown track. Square wins over it.
--bit-Message-shadow none Shadow of the surface. The Elevation parameter wins over it.
--bit-Message-focus-color --bit-clr-inf-focus Focus ring of the message itself and of its buttons. The Color parameter wins over it.
--bit-Message-font-size --bit-tpg-fs-sm Size of the title and the content. The Size parameter wins over it.
--bit-Message-line-height normal Line height of the title and the content, e.g. a roomier 1.5 for multiline text.
--bit-Message-title-color The message's own color Color of the title.
--bit-Message-title-font-weight --bit-tpg-fw-semibold Weight of the title.
--bit-Message-icon-color The message's own color Color of the severity icon, or of what IconTemplate renders.
--bit-Message-icon-size --bit-siz-icon-md Size of the severity icon. The Size parameter wins over it.
--bit-Message-progress-color The message's own color Color of the auto-dismiss countdown bar.
--bit-Message-progress-height --bit-siz-track-md Thickness of the auto-dismiss countdown track. The Size parameter wins over it.

API

Every parameter, public member, sub-class and enum this component exposes.

BitMessage parameters

Name Type Default value Description
Actions RenderFragment? null The content of the action to show on the message.
Alignment BitAlignment? null Determines the alignment of the content section of the message.
AutoDismissTime TimeSpan? null Enables the auto-dismiss feature and sets the time to automatically dismiss the message. It runs wherever dismissing would do something - an OnDismiss handler, Dismissible, or a Dismissed binding - and is held while the pointer is over the message, the focus is inside it, or PauseAutoDismiss was called (and, with PauseOnPageHidden / PauseOnWindowBlur, while the page is not being looked at).
AutoMultiline bool false Switches a single-line message to the Multiline layout (wrapped text, actions on their own row) for as long as its content does not fit on one line, instead of cutting it off. Truncate wins where both are set, and MaxLines only caps an explicitly Multiline message.
AutoFocus bool false Moves the focus to the message as soon as it is rendered. The root is made focusable (tabindex="-1") while no explicit TabIndex is given.
ChildContent RenderFragment? null The content of message.
Classes BitMessageClassStyles? null Custom CSS classes for different parts of the BitMessage.
CollapseAriaLabel string "Collapse" The aria-label and the tooltip of the expander button of the message in Truncate mode while it is expanded.
CollapseIcon BitIconInfo? null Gets or sets the icon for the collapse button in Truncate mode using custom CSS classes for external icon libraries. Takes precedence over CollapseIconName when both are set.
CollapseIconName string? null Gets or sets the name of the collapse icon in Truncate mode from the built-in Fluent UI icons.
Color BitColor? null The general color of the message. An explicit value wins over the --bit-Message-* color variables; left unset, the message is Info unless they say otherwise.
Content RenderFragment? null The alias for ChildContent.
DelayedAnnouncement bool false Holds the content of the message back for one render, so its live region is already on the page when the text lands in it, which is what makes the announcement reliable.
DismissAriaLabel string "Dismiss" The aria-label and the tooltip of the dismiss button of the message.
Dismissed bool false Determines whether the message has been dismissed, which is two-way bindable. A dismissed message renders nothing, and setting it back to false brings the message back and re-arms its AutoDismissTime countdown. The message only sets it itself while Dismissible is set or the parameter is bound.
DismissedChanged EventCallback<bool> null The callback that is called when the Dismissed value changes, for subscribing to the change without binding to Dismissed.
Dismissible bool false Renders the dismiss button and lets the message dismiss itself by setting Dismissed, without an OnDismiss handler having to take it off the page.
DismissIcon BitIconInfo? null Gets or sets the icon for the dismiss button using custom CSS classes for external icon libraries. Takes precedence over DismissIconName when both are set.
DismissIconName string? null Gets or sets the name of the dismiss icon from the built-in Fluent UI icons. If unset, default will be the Fluent UI Cancel icon.
DismissOnEscape bool false Dismisses the message when the Escape key is pressed while the focus is inside it. Only wired up while dismissing would do something - that is, while OnDismiss has a handler, Dismissible is set, or Dismissed is bound.
Elevation int? null Determines the elevation of the message, a scale from 1 to 24.
ExpandAriaLabel string "Expand" The aria-label and the tooltip of the expander button of the message in Truncate mode while it is collapsed.
Expanded bool false Determines whether the truncated content of the message is expanded, which is two-way bindable. Only meaningful together with Truncate.
ExpandedChanged EventCallback<bool> null The callback that is called when the Expanded value changes, for subscribing to the change without binding to Expanded.
ExpandIcon BitIconInfo? null Gets or sets the icon for the expand button in Truncate mode using custom CSS classes for external icon libraries. Takes precedence over ExpandIconName when both are set.
ExpandIconName string? null Gets or sets the name of the expand icon in Truncate mode from the built-in Fluent UI icons.
HideIcon bool false Prevents rendering the icon of the message.
Icon BitIconInfo? null Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.
IconAriaLabel string? null The text that says out loud what the icon of the message means, rendered invisibly at the start of the announced region. Set it where the text of the message does not already say what kind of message it is.
IconName string? null Gets or sets the name of the icon to display from the built-in Fluent UI icons. If unset, the icon will be selected automatically based on Color.
IconTemplate RenderFragment? null The custom template to render in place of the icon of the message, which takes precedence over Icon and IconName.
MaxLines int? null Caps how many lines the content of the message may wrap over in Multiline mode, ending the last of them in an ellipsis. Pair it with Truncate to give the reader the expander button that unfolds the rest.
Multiline bool false Determines if the message is multi-lined. If false, and the text overflows over buttons or to another line, it is clipped - unless Truncate or AutoMultiline says otherwise.
OnDismiss EventCallback Reports that the message was dismissed - by its button, the Escape key, the countdown or a DismissAsync call - and renders the dismiss button that does it. Taking the message off the page is left to this callback; use Dismissible to have the message do that itself.
OnDismissing EventCallback<BitMessageDismissArgs> Callback invoked before the message is dismissed, letting the dismissal be cancelled. Set Cancel on the provided args to keep the message where it is, and read its Reason to tell the dismiss button, the Escape key, the countdown and a DismissAsync call apart. Refusing a countdown gives the message its AutoDismissTime over again.
PauseOnPageHidden bool false Holds the AutoDismissTime countdown while the page is hidden (a background tab, a minimized window). Needs the bit BlazorUI services (AddBitBlazorUIServices).
PauseOnWindowBlur bool false Holds the AutoDismissTime countdown while the window does not have the focus. Needs the bit BlazorUI services (AddBitBlazorUIServices).
Politeness BitPoliteness? null How urgently the message interrupts a screen reader (aria-live), independently of the role it is announced under. Left unset, the role carries the urgency on its own: alert interrupts, status waits its turn.
Role string? null Custom role to apply to the message text. If unset, Warning, SevereWarning and Error announce as "alert" and every other color as "status". Set it to "none" for a message that should not be announced at all.
ShowAutoDismissProgress bool false Renders a bar along the bottom edge of the message that runs down as its AutoDismissTime does, holding wherever the countdown holds. It only renders where there is a countdown to show.
Size BitSize? null The size of the message: it scales the type, the icon, the insets, the buttons and the countdown track together. An explicit value wins over the --bit-Message-* size variables; left unset, the message is medium unless they say otherwise.
Square bool false Removes the rounded corners of the message so it can sit flush against the edges of its container as a banner.
Styles BitMessageClassStyles? null Custom CSS styles for different parts of the BitMessage.
Tinted bool false Washes the surface an Outline or a Text message leaves to the page with a faint tint of its color (the theme's --bit-clr-<role>-tint token); a Fill message ignores it.
Title string? null The title (heading) of the message, rendered above the content in multiline mode and ahead of it otherwise.
TitleElement string? null The HTML element the title of the message is rendered as. The default is a div; set it to a heading (h2 ... h6) where the message is a part of the page a reader should be able to jump to.
TitleTemplate RenderFragment? null The custom template to render as the title (heading) of the message, which takes precedence over Title.
Truncate bool false Determines if the message text is truncated. If true, the content is clipped to a single line and a button unfolds it, rendered only while something is actually clipped. On a Multiline message it unfolds the content past the MaxLines cap instead, and does nothing without one.
Variant BitVariant? null The variant of the message. Outline and Text shade the role color toward the foreground for the text, so it keeps a 4.5:1 contrast on the page; Tinted washes their surface with the role.

BitMessage public members

Name Type Default value Description
CollapseAsync Task Folds the truncated content of the message back into a single line, the way its expander button does.
DismissAsync Task Dismisses the message the same way its dismiss button does: the countdown is stopped, the message takes itself off the page while it owns its dismissal, and OnDismiss is invoked.
ExpandAsync Task Unfolds the truncated content of the message, the way its expander button does.
FocusAsync ValueTask Moves the focus to the message, which has to be focusable for the focus to land: either give it a TabIndex or set AutoFocus.
PauseAutoDismiss void Holds the AutoDismissTime countdown where it is, the way hovering the message does, for holding it over something the message cannot see.
ResumeAutoDismiss void Lets the AutoDismissTime countdown spend its time again after a PauseAutoDismiss, from wherever it was held.
ToggleExpandAsync Task Turns the truncated content of the message over: unfolds it while it is folded, folds it while it is not.

BitComponentBase parameters

Name Type Default value Description
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.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
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.
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.

BitComponentBase 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.

BitMessageClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitMessage.
RootContainer string? null Custom CSS classes/styles for the root container of the BitMessage.
Container string? null Custom CSS classes/styles for the icon and content container of the BitMessage.
IconContainer string? null Custom CSS classes/styles for the icon container of the BitMessage.
Icon string? null Custom CSS classes/styles for the icon element of the BitMessage.
IconLabel string? null Custom CSS classes/styles for the visually hidden icon label of the BitMessage.
ContentContainer string? null Custom CSS classes/styles for the content container of the BitMessage.
ContentWrapper string? null Custom CSS classes/styles for the content wrapper element of the BitMessage.
Title string? null Custom CSS classes/styles for the title element of the BitMessage.
Content string? null Custom CSS classes/styles for the content element of the BitMessage.
Actions string? null Custom CSS classes/styles for the actions element of the BitMessage.
ExpanderButton string? null Custom CSS classes/styles for the truncate expander button of the BitMessage.
ExpanderIcon string? null Custom CSS classes/styles for the truncate expander icon of the BitMessage.
DismissButton string? null Custom CSS classes/styles for the dismiss button of the BitMessage.
DismissIcon string? null Custom CSS classes/styles for the dismiss icon of the BitMessage.
AutoDismissProgress string? null Custom CSS classes/styles for the auto-dismiss progress track of the BitMessage.
AutoDismissProgressBar string? null Custom CSS classes/styles for the auto-dismiss progress bar of the BitMessage.

BitMessageDismissArgs properties

Name Type Default value Description
Reason BitMessageDismissReason What made the message dismiss: its dismiss button, the Escape key, the auto-dismiss countdown, or a call to the DismissAsync method.
Cancel bool false Set to true to cancel the dismissal and keep the message where it is.

BitIconInfo properties

Name Type Default value Description
Name string? null Gets or sets the name of the icon.
BaseClass string? null Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix string? null Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitColor enum

Name Value Description
Primary 0 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.

BitVariant enum

Name Value Description
Fill 0 Fill styled variant.
Outline 1 Outline styled variant.
Text 2 Text styled variant.

BitAlignment enum

Name Value Description
Start 0 Packs the content at the start of the axis.
End 1 Packs the content at the end of the axis.
Center 2 Centers the content on the axis.
SpaceBetween 3 Distributes the free space between the items, with no space at the two edges.
SpaceAround 4 Distributes the free space around the items, so the edges get half of what sits between the items.
SpaceEvenly 5 Distributes the free space evenly between the items and at the two edges.
Baseline 6 Aligns the items on their baseline.
Stretch 7 Stretches the items to fill the axis.

BitPoliteness enum

Name Value Description
Off 0 The region is not a live region: nothing in it is announced as it changes (aria-live="off").
Polite 1 The change waits its turn and is announced once the screen reader has finished what it was saying (aria-live="polite").
Assertive 2 The change interrupts the screen reader and is announced right away (aria-live="assertive").

BitMessageDismissReason enum

Name Value Description
Button 0 The dismiss button of the message was pressed.
Escape 1 The Escape key was pressed while the focus was inside the message.
AutoDismiss 2 The AutoDismissTime countdown of the message ran out.
Programmatic 3 The DismissAsync method of the message was called.

BitSize enum

Name Value Description
Small 0 The small size.
Medium 1 The medium size.
Large 2 The large size.

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.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.