Lists
Swiper
Bit.BlazorUITouchSlider
Swiper (touch slider) lets people show their items in a swiping row. Unlike the Carousel, which pages through its slides, the swiper is a real scrolling region: the items sit side by side and the row scrolls freely through them, so a touch swipe carries the momentum of the platform and nothing crosses over to .NET while a finger is on the screen. It can be moved with its next/prev buttons and dots, by dragging it, with the keyboard or the mouse wheel, programmatically, or on its own with autoplay; it can settle on an item instead of stopping anywhere (Snap), size its items to a number that fit at a time (adapting that to its own width), scroll vertically, and it follows the carousel pattern of the ARIA authoring practices: a labelled region of labelled items, real buttons for every control, and a rotation that stops as soon as the pointer or the keyboard focus reaches it.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
The basic swiper lays its items out in a scrolling row and renders the next/prev buttons over its sides,
each of which hides itself at the end it cannot move any further towards. The row can also be dragged with
the mouse, swiped with a finger, and (since the swiper is focusable) moved with the arrow keys and the
Home/End keys. Give the swiper an AriaLabel that describes its content, so assistive technologies can
announce what the region holds.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
ScrollItemsCount
The ScrollItemsCount parameter sets how many items a single navigation moves, which is the step of the
next/prev buttons, of the arrow keys and of the mouse wheel. A move that would overshoot the end of the
swiper runs out to it instead, so the last item is never left half shown.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
HideNextPrev
The HideNextPrev parameter removes the navigation buttons, leaving a bare rail that is moved by dragging
it, by swiping it, with the keyboard or with the scrollbar. The buttons also leave on their own while
everything already fits in the swiper, since there is nothing to move then.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Snap
The Snap parameter makes the swiper settle on an item instead of stopping wherever the scrolling ran out,
and chooses where that item comes to rest: at the Start of the swiper, in its Center, or at its End. The
snapping itself is the browser's (CSS scroll snapping), so a touch swipe settles exactly the way a
navigation does. Without it the swiper scrolls freely, which is what a rail of items that are read side by
side wants.
Start: each item comes to rest against the leading edge of the swiper.
1
2
3
4
5
6
7
8
9
10
11
12
Center: the item settles in the middle of the swiper.
1
2
3
4
5
6
7
8
9
10
11
12
End: each item comes to rest against the trailing edge of the swiper.
1
2
3
4
5
6
7
8
9
10
11
12
Multiple items
Without VisibleItemsCount the items keep whatever size they were given, which is what a rail of differently
sized items wants. With it they are all sized to a fraction of the swiper, so exactly that many fit at a
time, which is what a row of cards wants. The Xs to Xxl variants adapt that number to the size the swiper
itself is laid out at (not the size of the window), each applying from its breakpoint upwards, so the same
swiper shows fewer cards inside a sidebar and more across a full width page.
Four at a time, moved two at a time:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Resize the window (or this panel) to watch the number of items change, from one up to five:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Gap
The Gap parameter puts space (any CSS length) between the items of the swiper. It is also taken into
account by VisibleItemsCount, so the requested number of items keeps fitting in the swiper once they are
spaced out.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vertical
The Vertical parameter stacks the items over the height of the swiper, so it scrolls up and down instead of
left and right: the navigation buttons move to the top and bottom edges and the up/down arrow keys take
over the navigation. A vertical swiper is laid out over its own height, so give it one (it falls back to a
default height otherwise).
1
2
3
4
5
6
7
8
9
10
11
12
Dots
The ShowDots parameter renders navigation dots below the items. A dot stands for a screenful of the swiper
rather than for a single item, since a swiper shows as many items as it has room for, and the dots are left
out while everything already fits. The DotTemplate parameter replaces the content of a dot, receiving the
zero based index of the page it navigates to, so the row can carry page numbers, thumbnails, or anything
else.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Numbered dots:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
AutoPlay
The AutoPlay parameter scrolls the items on its own at the AutoPlayInterval, rewinding to the start when it
reaches the end. The scrolling pauses while the pointer rests over the swiper or the keyboard focus is
inside it (PauseOnHover / PauseOnFocus, both on by default) and while the page sits in a background tab,
and resumes when they leave.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The ShowPlayPause parameter renders a play/pause button next to the dots so the scrolling can be stopped
and started by hand (which WCAG asks of any auto-moving content), and StopOnInteraction stops it for good
as soon as the swiper is navigated manually. Pause, Resume and TogglePlay do the same from code, and
IsPaused / IsPlaying report the state. AutoPlayReverse plays it backwards, and StopOnLastSlide stops at the
end instead of rewinding.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Interaction
The way the swiper is operated by hand is configurable: NoDrag turns off dragging it with the mouse (a
touch swipe is the browser's own scrolling of the region and is never taken away), DragThreshold sets how
far the pointer has to travel before a press turns into a drag rather than staying a click, NoKeyboard
takes the swiper out of the tab sequence and turns off its arrow key navigation, Wheel navigates it with
the mouse wheel, and ShowScrollbar leaves the scrollbar visible, which is hidden by default.
This swiper is navigated with the mouse wheel and cannot be dragged:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
This one keeps its scrollbar, which is another way of moving it:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Animation
The AnimationDuration parameter sets how long the moves the swiper makes itself take, in seconds (0.5 by
default): the ones of its buttons, its dots, the keyboard, the wheel, the auto scrolling and the public
API, plus the glide a flick of the pointer ends with. A value of 0 moves the items at once, with no
animation at all. A touch swipe is scrolled by the browser, which brings the timing of the platform with
it, and the animation collapses to nothing when the system asks for reduced motion.
Slow (1.5 seconds):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
No animation (0 seconds):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
DefaultItem
The DefaultItem parameter sets the item (1 based, like GoTo) the swiper starts on. It is only read
while the swiper is being set up, so the swiper is laid out there rather than sliding over to it,
and changing it afterwards does not move the swiper (use GoTo for that). Values outside of the range
of the swiper are clamped to its first or last item.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Public API
The swiper can be driven entirely from application code through a @ref to it: GoNext, GoPrev, GoTo (1
based), GoToPage (1 based), GoToStart and GoToEnd navigate it, Pause, Resume and TogglePlay drive the auto
scrolling, and Refresh measures it again after something else moved the ground under it. The CurrentIndex
(zero based), CurrentPage, PagesCount, ItemsCount, IsAtStart, IsAtEnd, IsPlaying and IsPaused members
report where it stands, and OnChange fires with the index of the item it came to stand on, however it was
moved: with its controls, by dragging, by scrolling it, with the keyboard or by the auto scrolling. This
example hides the built-in buttons and replaces them with its own.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Current item: 1
Accessibility
The swiper follows the carousel pattern of the ARIA authoring practices out of the box: its root is a
focusable region marked as a carousel, every item is a group marked as a slide, all of the controls are
real buttons that point at the items they move with aria-controls, and the play/pause button is the first
thing the keyboard reaches so the motion can be stopped before anything else. The text of all of that is
yours to set:
- AriaLabel names the swiper region, which is what a screen reader announces on the way in.
- ItemAriaLabelFormat names the items that carry no label of their own ("{0} of {1}" by default, where {0} is the position of the item and {1} the number of items); an item that deserves a better name takes an AriaLabel of its own.
- DotsAriaLabel names the group of dots and DotAriaLabel prefixes each one of them, which is followed by the number of the page it navigates to.
- NextAriaLabel and PrevAriaLabel name the navigation buttons.
- PlayButtonAriaLabel and PauseButtonAriaLabel name the rotation control in each of its two states.
Color
The Color parameter offers the general colors of the theme for the chrome of the swiper: it colors the dot
of the current page and the navigation buttons. The Accent parameter is its lighter-weight sibling that
only offers the primary/secondary/tertiary/transparent kinds for the current dot.
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
Accent, which only colors the dot of the current page:
1
2
3
4
5
6
1
2
3
4
5
6
External Icons
Use icons from external libraries like FontAwesome and Bootstrap Icons with the NextIcon and PrevIcon parameters.
FontAwesome:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Bootstrap Icons:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Size
The Size parameter offers three sizes for the chrome of the swiper: the dots and the navigation buttons.
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
Style & Class
Besides the Style and Class parameters of the root element, the Styles and Classes parameters customize
every part of the swiper: its container, its items and the one it is currently standing on (Item and
CurrentItem), the navigation buttons and their icons, the dots and the current dot, and the play/pause
button and its icon.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
RTL
In right-to-left mode the swiper lays its items out and scrolls from right to left, and the two navigation
buttons swap sides accordingly: the next button sits at the left edge and the previous one at the right.
The arrow keys keep moving the view the way they point.
مورد 1
مورد 2
مورد 3
مورد 4
مورد 5
مورد 6
مورد 7
مورد 8
مورد 9
مورد 10
مورد 11
مورد 12
مورد 13
مورد 14
مورد 15
مورد 16
API
Every parameter, public member, sub-class and enum this component exposes.
BitSwiper parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Accent | BitColorKind? | null | Specifies the accent color kind of the component, which colors the dot of the current page. Color takes precedence over it when both are set. |
| AnimationDuration | double | 0.5 | Sets the duration of the scrolling animation in seconds (the default value is 0.5). A value of 0 moves the items at once. |
| AutoPlay | bool | false | Enables/disables the auto scrolling of the items. |
| AutoPlayInterval | double | 2000 | Sets the interval of the auto scrolling in milliseconds (the default value is 2000). |
| AutoPlayReverse | bool | false | Plays the auto scrolling backwards, from the last item towards the first one. |
| ChildContent | RenderFragment? | null | Items of the swiper. |
| Classes | BitSwiperClassStyles? | null | The custom CSS classes for the different parts of the swiper. |
| Color | BitColor? | null | The general color of the swiper, applied to the dot of the current page and the next/prev and play/pause buttons. |
| DefaultItem | int | 1 | The item (1 based, like GoTo) the swiper starts on when it first renders. Values outside of the range of the swiper are clamped to its first or last item. |
| DotAriaLabel | string | Slide | The accessible label of a dot of the swiper, followed by the number of the page it navigates to. |
| DotsAriaLabel | string | Choose slide to display | The accessible label of the dots container of the swiper. |
| DotTemplate | RenderFragment<int>? | null | The custom content of a dot of the swiper, receiving the zero based index of the page the dot navigates to. |
| DragThreshold | int | 5 | The distance (in pixels) the pointer has to travel over the swiper before it starts dragging it, instead of the press staying a click. |
| Gap | string? | null | The space between the items of the swiper (any CSS length, for example 1rem), which VisibleItemsCount takes into account. |
| HideNextPrev | bool | false | Hides the Next/Prev buttons of the BitSwiper. Each button also hides itself at the end it cannot move any further towards. |
| ItemAriaLabelFormat | string? | null | The accessible label of an item of the swiper, as a composite format string whose {0} is the 1 based position of the item and whose {1} is the number of items ("{0} of {1}" by default). |
| NextAriaLabel | string? | null | The accessible label of the next button of the swiper (the default value is "Next slide"). |
| NextIcon | BitIconInfo? | null | Gets or sets the icon to display in the next navigation button using custom CSS classes for external icon libraries. Takes precedence over NextIconName when both are set. |
| NextIconName | string? | null | Gets or sets the name of the icon to display in the next navigation button from the built-in Fluent UI icons. |
| NoDrag | bool | false | Disables dragging the swiper with the mouse. A touch swipe is the browser's own scrolling of the region and is not taken away. |
| NoKeyboard | bool | false | Removes the swiper from the tab sequence and turns off its keyboard navigation. |
| OnChange | EventCallback<int> | The event that will be called with the zero based index of the item the swiper came to stand on, however it was moved. | |
| PauseButtonAriaLabel | string | Stop automatic slide show | The accessible label of the play/pause button while the auto scrolling is running. |
| PauseIcon | BitIconInfo? | null | Gets or sets the icon of the play/pause button while the auto scrolling is running, using custom CSS classes for external icon libraries. |
| PauseIconName | string? | null | Gets or sets the name of the icon of the play/pause button while the auto scrolling is running, from the built-in Fluent UI icons. |
| PauseOnFocus | bool | true | Pauses the auto scrolling while the keyboard focus is inside the swiper. |
| PauseOnHover | bool | true | Pauses the auto scrolling while the pointer is over the swiper. |
| PlayButtonAriaLabel | string | Start automatic slide show | The accessible label of the play/pause button while the auto scrolling is paused. |
| PlayIcon | BitIconInfo? | null | Gets or sets the icon of the play/pause button while the auto scrolling is paused, using custom CSS classes for external icon libraries. |
| PlayIconName | string? | null | Gets or sets the name of the icon of the play/pause button while the auto scrolling is paused, from the built-in Fluent UI icons. |
| PrevAriaLabel | string? | null | The accessible label of the previous button of the swiper (the default value is "Previous slide"). |
| PrevIcon | BitIconInfo? | null | Gets or sets the icon to display in the previous navigation button using custom CSS classes for external icon libraries. Takes precedence over PrevIconName when both are set. |
| PrevIconName | string? | null | Gets or sets the name of the icon to display in the previous navigation button from the built-in Fluent UI icons. |
| ScrollItemsCount | int | 1 | Number of items that is going to be changed on navigation, which is the step of the buttons, the arrow keys and the mouse wheel. |
| ShowDots | bool | false | Renders the navigation dots below the items of the swiper, one per screenful of it. |
| ShowPlayPause | bool | false | Renders a play/pause button next to the dots, so the auto scrolling can be stopped and started again. |
| ShowScrollbar | bool | false | Leaves the scrollbar of the swiper visible, which is hidden by default. |
| Size | BitSize? | null | The size of the dots and of the next/prev buttons of the swiper. |
| Snap | BitSwiperSnap? | null | Settles the swiper on an item instead of leaving it wherever the scrolling ran out, and chooses where that item comes to rest. |
| StopOnInteraction | bool | false | Stops the auto scrolling as soon as the swiper is navigated by hand. |
| StopOnLastSlide | bool | false | Stops the auto scrolling at the end of the swiper instead of rewinding to its start. |
| Styles | BitSwiperClassStyles? | null | The custom CSS styles for the different parts of the swiper. |
| Vertical | bool | false | Stacks the items vertically, so the swiper scrolls up and down instead of left and right. |
| VisibleItemsCount | int? | null | Number of items that is visible in the swiper, which sizes the items accordingly. Without it the items keep whatever size they were given. |
| VisibleItemsCountXs | int? | null | Number of visible items in the extra small breakpoint (from 0 up). |
| VisibleItemsCountSm | int? | null | Number of visible items in the small breakpoint (from 600px up). |
| VisibleItemsCountMd | int? | null | Number of visible items in the medium breakpoint (from 960px up). |
| VisibleItemsCountLg | int? | null | Number of visible items in the large breakpoint (from 1280px up). |
| VisibleItemsCountXl | int? | null | Number of visible items in the extra large breakpoint (from 1920px up). |
| VisibleItemsCountXxl | int? | null | Number of visible items in the extra extra large breakpoint (from 2560px up). |
| Wheel | bool | false | Navigates the swiper with the wheel of the mouse (or with a two finger scroll on a trackpad). |
BitSwiper public members
| Name | Type | Default value | Description |
|---|---|---|---|
| CurrentIndex | int | The zero based index of the item the swiper is currently standing on. | |
| CurrentPage | int | The zero based index of the screenful (page) the swiper is currently showing. | |
| IsAtStart | bool | Whether the swiper is scrolled all the way to its start. | |
| IsAtEnd | bool | Whether the swiper is scrolled all the way to its end. | |
| IsPaused | bool | Whether the auto scrolling has been paused through Pause or the play/pause button. | |
| IsPlaying | bool | Whether the auto scrolling is currently running. | |
| ItemsCount | int | The number of items of the swiper. | |
| PagesCount | int | The number of screenfuls (pages) the items of the swiper take up. | |
| GoNext | Task | Navigates to the next swiper item. | |
| GoPrev | Task | Navigates to the previous swiper item. | |
| GoTo | Task | Navigates to the given swiper item number (1 based). | |
| GoToPage | Task | Navigates to the given swiper page number (1 based), a page being one screenful of the swiper. | |
| GoToStart | Task | Navigates to the start of the swiper. | |
| GoToEnd | Task | Navigates to the end of the swiper. | |
| Pause | void | Pauses the AutoPlay if enabled. | |
| Resume | void | Resumes the AutoPlay if enabled. | |
| TogglePlay | void | Pauses the AutoPlay when it is running, and resumes it when it is paused. | |
| Refresh | Task | Measures the swiper again and reports where it stands. |
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. |
| 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. |
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. |
BitSwiperClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitSwiper. |
| Container | string? | null | Custom CSS classes/styles for the scrolling container of the BitSwiper. |
| Item | string? | null | Custom CSS classes/styles for the items of the BitSwiper. |
| CurrentItem | string? | null | Custom CSS classes/styles for the item the swiper is currently standing on. |
| Buttons | string? | null | Custom CSS classes/styles for the next/prev buttons of the BitSwiper. |
| ButtonIcons | string? | null | Custom CSS classes/styles for the icons of the next/prev buttons of the BitSwiper. |
| NextButton | string? | null | Custom CSS classes/styles for the next button of the BitSwiper. |
| NextButtonIcon | string? | null | Custom CSS classes/styles for the icon of the next button of the BitSwiper. |
| PrevButton | string? | null | Custom CSS classes/styles for the previous button of the BitSwiper. |
| PrevButtonIcon | string? | null | Custom CSS classes/styles for the icon of the previous button of the BitSwiper. |
| DotsContainer | string? | null | Custom CSS classes/styles for the dots container of the BitSwiper. |
| Dots | string? | null | Custom CSS classes/styles for the dot elements of the BitSwiper. |
| CurrentDot | string? | null | Custom CSS classes/styles for the current dot element of the BitSwiper. |
| PlayPauseButton | string? | null | Custom CSS classes/styles for the play/pause button of the BitSwiper. |
| PlayPauseButtonIcon | string? | null | Custom CSS classes/styles for the icon of the play/pause button of the BitSwiper. |
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. |
BitSwiperSnap enum
| Name | Value | Description |
|---|---|---|
| Start | 0 | The item settles with its leading edge at the start of the swiper. |
| Center | 1 | The item settles in the middle of the swiper. |
| End | 2 | The item settles with its trailing edge at the end of the swiper. |
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. |
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. |
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.