CSS tab-size property is used to specify the width of tab characters ((U+0009)) within an element. It allows you to control the visual spacing of tab characters, which can be useful when displaying code or other content where tab characters are significant.
Possible Values
<integer> − Specifies the width of tab characters as a multiple of the width of a single space character. For example, a value of 4 would make tab characters four times wider than a space character. It cannot be negative.
<length> − Specifies the width of tab characters using a fixed length value, such as pixels (px), points (pt), or ems (em). It cannot be negative.
Applies to
Block containers.
Syntax
<integer> Values
tab-size: 4;
tab-size: 0;
<length> Values
tab-size: 10px;
tab-size: 2em;
CSS tab-size – Expanding By Character Count
The following example demonstrates how the tab-size property sets tab size to the 8 characters and tab size of 12 characters −
<html><head><style>
.tab1 {
-moz-tab-size: 8;
tab-size: 8;
}
.tab2 {
-moz-tab-size: 12;
tab-size: 12;
}
</style></head><body><pre class="tab1">
CSS tab-size with 8.
</pre><pre class="tab2">
CSS tab-size with 12.
</pre></body></html>
CSS tab-size – Comparing To The Default Size
The following example demonstrates the default tab size, tab size of 3 characters, and tab size of 3 spaces. The white-space: pre keeps the tabs from collapsing. −
<html><head><style>
p {
white-space: pre;
}
.tab1 {
tab-size: 3;
}
</style></head><body><p>Without tab-size</p><p> Default tab-size to 8 characters.</p><p class="tab1"> tab-size with 3 characters.</p><p> tab-size with 3 spaces.</p></body></html>
CSS justify-self property provides a default alignment along the relevant axis for each box by setting the default justify-self for all box items.
Syntax
justify-self: auto | normal | stretch | start | right | center | left | end | overflow-alignment | baseline alignment | initial | inherit;
Property Values
Value
Description
auto
It inherits the grid container justify-items property value. Default.
normal
It is dependent on the layout mode, for grid layout it is same as “stretch”
stretch
It stretches to fill the grid cell if width is not set.
start
It aligns items at the start in the inline direction edge of the alignment container .
left
It aligns items at the left edge of the alignment container .
center
It aligns items at the center edge of the alignment container .
end
It aligns items at the end in the inline-direction edge of the alignment container .
right
It aligns items at the right edge of the alignment container .
overflow alignment
safe: If the size of the item overflows the alignment container, the alignment mode of the item is set as “start”unsafe: The specified alignment value is honored regardless of the relative sizes of the item and alignment container.
baseline alignment
The element is aligned with the baseline of the parent.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Justify Self Property
The following examples explain the justify-self property with different values.
Justify Self Property with Auto Value
To let the grid item align according to the default alignment specified by the justify-items property of the grid container, we use the auto value. The grid item will use the alignment behavior set for the container. In the following example, justify-items has been set to “stretch”.
The normal value is similar to auto value as it typically corresponds to the default alignment behavior. It generally aligns items based on the default setting of the grid container. This is shown in the following example.
To make the grid item stretch to fill the entire width of its grid cell, we use the stretch value. It ensures that items expand to fit the available space. This is shown in the following example.
To align the grid item to the start edge of its grid cell, we use the start value. In left-to-right (LTR) languages, this is equivalent to aligning to the left; in right-to-left (RTL) languages, it aligns to the right. The direction property determines the start edge. This is shown in the following example.
aligns the grid item to the end edge of its grid cell, we use the end value. In left-to-right (LTR) languages, this is equivalent to aligning to the right; in right-to-left (RTL) languages, it aligns to the left. The direction property determies the end edge. This is shown in the following example.
To align the grid item such that its baseline aligns with the last baseline of the grid cell, we use the last baseline value. This is useful for aligning text elements so that the last lines of text in each grid item are aligned horizontally. This is shown in the following example.
CSS justify-items property is used to align grid-items within their grid area along the inline direction (horizontal). It controls how items are placed within their grid cells, effectively setting their alignment within the container’s grid.
Syntax
justify-items: legacy | normal | stretch | start | left | center | end | right | overflow-alignment | baseline alignment | initial | inherit;
Property Values
Value
Description
legacy
This value is inherited by box descendants. However, if a descendant has justify-self: auto, only left, right, or centre values are considered, not the legacy keyword. Default.
normal
It is dependent on the layout mode, for grid layout it is same as “stretch”
stretch
It stretches to fill the grid cell if width is not set.
start
It aligns items at the start in the inline direction edge of the alignment container .
left
It aligns items at the left edge of the alignment container .
center
It aligns items at the center edge of the alignment container .
end
It aligns items at the end in the inline-direction edge of the alignment container .
right
It aligns items at the right edge of the alignment container .
overflow alignment
safe: If the size of the item overflows the alignment container, the alignment mode of the item is set as “start”unsafe: The specified alignment value is honored regardless of the relative sizes of the item and alignment container.
baseline alignment
The element is aligned with the baseline of the parent.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Justify Items Property
The following examples explain the justify-items property with different values.
Justify Items Property with Normal Value
To align items using the default alignment behavior, which typically corresponds to stretch in most modern browsers, we use the normal value. This is shown in the following example.
To let the grid item stretch to fill the entire width of its grid cell, we use the stretch value. This is the default value. This is shown in the following example.
To align the grid item to the start edge of its grid area, we use the start value. In left-to-right (LTR) languages, this is equivalent to left; in right-to-left (RTL) languages, it aligns to the right edge. The direction property determines the starting edge. This is shown in the following example.
To align the grid item to the end edge of its grid area, we use the end value. In LTR languages, this is equivalent to right; in RTL languages, it aligns to the left edge. The direction property determines the ending edge This is shown in the following example.
To align the grid item to the center of its grid area in the inline direction, we use the center value. All grid items are aligned at the center horizontally within their grid cells. This is shown in the following example.
To align the grid item to the left edge of its grid area in the inline direction, we use the left value. All grid items are positioned flush against the left side of their respective grid cells. This is shown in the following example.
To align the grid item to the right edge of its grid area in the inline direction, we use the right value. All grid items are positioned flush against the right side of their respective grid cells. This is shown in the following example.
To align the grid item along the baseline of the grid cell, we use the baseline value. This is useful to align items with a specific baseline. This is shown in the following example.
This value ensures that items are aligned to the right edge of their grid cells according to the behavior implemented by browsers before the CSS Grid specification was fully standardized. It was designed to provide backward compatibility with older browser behaviors that used a different alignment system. This is shown in the following example.
The CSS property overscroll-behavior is a shorthand property that determines what a browser does when the boundary of a scrolling area is reached.
The constituent properties of this property are overscroll-behavior-x and overscroll-behavior-y.
Scroll chaining is a behavior that is observed when a user scrolls past the boundary (top, bottom, left or right) of a scrollable element, causing the scrolling on an ancestor element. This creates a chain effect in scrolling.
For example, if you have a modal dialog box on the webpage, that has content which can be scrolled vertically. As you reach the end of the scrollable area of this modal, the scrolling continues on the main page’s content behind the modal dialog box. This continuous scrolling experience is called the scroll chaining.
This behavior may or may not be desirable and in order to avoid it, the property overscroll-behavior is used. The property is applied only on the scrollable containers. Setting this property on <iframe> has no effect and thus it needs to be set on both the <html> and the <body> elements of the iframe’s document.
Possible Values
The CSS property overscroll-behavior is defined as one or two of the keywords as given below. The two keywords specifies the value on the x and y axes respectively. When only one value is specified, both the x and y axes have the same value.
auto − The default scroll behavior is normal.
contain − The scroll behavior is seen only in the element where the value is set. No scrolling set on neighboring elements.
none − No scroll chaining behavior is seen. Default scroll overflow behavior is avoided.
Applies To
All non-replaced block-level elements and non-replaced inline-block elements.
Syntax
overscroll-behavior = [ contain | auto | none ]{1,2}
CSS overscroll-behavior – auto Value
Following example demonstrates the use of overscroll-behavior: auto that sets the scroll effect continuous. So as the boundary of the scrollable element is reached, on scrolling, the parent element gets scrolled.
}
</style></head><body><h1>overscroll-behavior Property</h1><p>The box displayed below has overscroll-behavior set as auto, which is the default value.</p><p>Scroll the blue box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p><div id="main-box"><div id="box-1"><h2>overscroll-behavior: auto</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.</p></div></div></body></html>
CSS overscroll-behavior – Comparison of Values
Following example demonstrates the use of overscroll-behavior: contain that sets the scrolling effect contained to the element it is applied. So as the boundary of the scrollable element is reached, on scrolling, the parent element does not get scrolled.
}
#main-box > div {
flex: 1;
height: 150px;
}
</style></head><body><h1>overscroll-behavior Property</h1><p>The two boxes displayed below has overscroll-behavior set as auto and contain, respectively.</p><p>Scroll the first pink box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p><p>Scroll the second white box using the mouse and once it is scrolled completely keep scrolling and see the parent element not getting scrolled.</p><div id="main-box"><div id="box-1"><h3>overscroll-behavior: auto</p><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p></div><div id="box-2"><h3>overscroll-behavior: contain</p><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p></div></div></body></html></pre>
CSS overscroll-behavior - Two Keyword Values
Following example demonstrates the use of overscroll-behavior: auto contain (two values), that sets the scrolling effect auto on x axis and contained on y-axis. So as the vertical boundary of the scrollable element is reached, on scrolling, the parent element does not get scrolled (as contained), but the horizontal boundary set as auto, which leads to scrolling of parent element on the x-axis.
Open Compiler
<html><head><style>
#main-box, #box-2 {
margin: 15px;
padding: 3px;
border: solid black 1px;
overflow: auto;
}
</style></head><body><h1>overscroll-behavior - Two value Syntax</h1><p>The two value syntax is used with overscroll-behavior as auto on x axis and none on y-axis.</p><div id="main-box"><div id="box-2"><h3>overscroll-behavior: auto none</p><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p></div></div></body></html></pre>
CSS overscroll-behavior - Associated Properties
Following table lists down the CSS properties that are associated with overscroll-behavior property:
Property
Description
overscroll-behavior-x
Sets the browser's behavior when the horizontal boundary of a scrolling area is reached.
overscroll-behavior-y
Sets the browser's behavior when the vertical boundary of a scrolling area is reached.
overscroll-behavior-block
Sets the browser's behavior when the block direction boundary of a scrolling area has been reached.
overscroll-behavior-inline
Sets the browser's behavior when the inline direction boundary of a scrolling area has been reached.
CSS isolation property is used to control how an element’s content interacts with its parent and sibling elements in terms of rendering and stacking context. It essentially determines whether an element establishes a new stacking context or not.
Syntax
isolation: auto | isolate | initial | inherit;
Property Values
Value
Description
auto
It indicates that the element’s content does not create a new stacking context. Instead, it inherits the stacking context of its parent. Default.
isolate
This value indicates that the element creates a new stacking context, isolating its content from the rest of the document. This means that the element’s content will be rendered independently of its siblings and parent elements.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Isolation Property
The following examples explain the isolation property with different values.
Isolation Property with Auto Value
The following example demonstrates the auto value of the isolation property which does not create a new stacking context. The mix-blend-mode: difference subtracts the top color from the bottom color and creating in a high-contrast effect.
The following example demonstrates the isolate value of the isolation property that creates a new stacking context for box1, preventing the box1 from blending with external elements and the blend mode applied to box2 doesn't impact elements inside box1. The mix-blend-mode: difference property subtracts the top color from the bottom color and creating high-contrast effect.
CSS inset property is used to control the position of an element relative to its containing block. It is a shorthand property for defining values to the properties top, right, bottom, and / or left in a single statement. The position property must be declared in order for the property to show its effect.
Syntax
inset: auto | length | percentage | initial | inherit;
Property Values
Value
Description
auto
It determines the size of the element based on its content or other layout factors. Default.
length
It sets the inset distance of an element using length units (e.g. px, em, rem etc.). Negative values can be used.
percentage
It sets the inset distance of an element using percentage values relative to its parent container.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Inset Property
The following examples explain the inset property with different values.
Inset Property with Auto Value
To let the browser calculate the positioning based on the element’s default behavior or other factors, we use the auto value. This value is often used to align the elements position according to its containing block’s edges. This is shown in the following example.
TutorialsPoint offers extensive online tutorials
and courses on various tech topics, including
programming, web development, and data science.
</p></div></body></html></pre>
Inset Property with Length Values
To set the position of the element, we can use length units (e.g. px,rem,em etc.). The inset property accepts upto four values. Depending on the number of values provided, the corresponding edges will be affected. This is shown in the following example.
TutorialsPoint offers extensive online tutorials
and courses on various tech topics, including
programming, web development, and data science.
</p></div><h4>
inset: 15px 40px (top and bottom have
15px distance while left and right
have 40px distance)
TutorialsPoint offers extensive online tutorials
and courses on various tech topics, including
programming, web development, and data science.
</p></div><h4>
inset: 15px 35px 45px (top has 15px
distance, left and right have 35px
distance and bottom has 45px distance)
TutorialsPoint offers extensive online tutorials
and courses on various tech topics, including
programming, web development, and data science.
</p></div><h4>
inset: 15px 25px 35px 45px (top has 15px
distance, right has 25px distance, bottom
has 35px distance and left has 45px distance)
TutorialsPoint offers extensive online tutorials
and courses on various tech topics, including
programming, web development, and data science.
</p></div></body></html></pre>
Inset Property with Percentage Values
To set the position of the element, we can use percentage values (e.g. 5%, 10% etc.). The inset property accepts upto four values. Depending on the number of values provided, the corresponding edges will be affected. This is shown in the following example.
TutorialsPoint offers extensive online tutorials
and courses on various tech topics, including
programming, web development, and data science.
</p></div><h4>
inset: 5% 15% 25% (top has 5% distance,
left and right have 15% distance and
bottom has 25% distance of the container)
TutorialsPoint offers extensive online tutorials
and courses on various tech topics, including
programming, web development, and data science.
</p></div><h4>
inset: 5% 25% 30% 15% (top has 5% distance,
right has 25% distance, bottom has 30%
distance and left has 15% distance of
the container)
TutorialsPoint offers extensive online tutorials
and courses on various tech topics, including
programming, web development, and data science.
</p></div></body></html></pre>
Inset Property with Mixed Values
To set the position of the element, we can use a combination of length units (e.g. px,rem,em etc.) and percentage values (e.g. 10%, 20% etc.). The inset property accepts upto four values. Depending on the number of values provided, the corresponding edges will be affected. This is shown in the following example.
inset: 25px 10% 15px 35% (top has 25px distance,
right has 10% distance from the container, bottom
has 15px distance and left has 35% distance from
the container)
</h4><div class="container"><p class="values">
TutorialsPoint offers extensive online tutorials
and courses on various tech topics, including
programming, web development, and data science.
</p></div></body></html></pre>
Note: The inset property accepts different number of parameters, so depending on the number of values provided, the corresponding edges will be affected.
One value: it applies distance to all four edges equally.
Two values: the first value provides distance to top and bottom edges while the second value provides value to the left and right edges.
Three values: the first value provides distance to the top edge, second value provides distance to left and right edges and the third value provides distance to the bottom edge.
Four Values: the first value provides distance to the top edge, second value to the right edge, third value to the bottom edge and fourth value to the left edge.
CSS all property resets all properties of an element, with the exception of unicode bidi, direction and CSS custom properties. It can reset properties to their original or inherited values or to the values explicitly defined in another cascade layer or in the stylesheet origin.
Syntax
all: initial | inherit | unset;
Property Values
Value
Description
initial
It changes all the properties applied to an element or to its parent to their initial value.
inherit
It changes all the properties applied to an element or to its parent to their parent value.
unset
It changes all the properties applied to the element or the element’s parent to their parent value if they are inheritable else to their initial value if not
Examples of CSS All Property
The following example explains the all property with different values.
All Property with Initial Value
To let an element’s properties be set to their default values assigned by the browser such that no defined styling is applicable to them, we use the initial value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>
html {
font-size: 25px;
color: lightcoral;
font-style: italic;
}
See how this sentence changes!-
This is reference sentence
</div><br/><div id="custom2">
See how this sentence changed. This sentence
is using initial value so it does not inherit
anything from its parent element or html element,
this is evident from the text style and color.
</div></body></html>
All Property with Inherit Value
To let an element’s properties be set to the properties of the element’s parent or the html element then, we use the inherit value. The properties defined by the parent if present will be applied if not then the html element properties will be applied. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>
html {
font-size: 25px;
color: lightcoral;
font-style: italic;
}
See how this sentence changes!-
This is reference sentence
</div><br/><div id="custom2">
See how this sentence changed. This sentence
is using inherit value so it inherits the properties
from its parent or from the html element, in this
case the html element. It has inherited font-size,
color and font-style.
</div></body></html>
All Property with Unset Value
To let the properties of an element be obtained from its parent if present or from html element if absent or from the default values decided by the browser (behave like initial) in the absence of both then, we use unset value. This is shown in the following example.
This sentence is using the 'unset' value and also
has a parent, so it inherits the parent properties.
</div></div><br/><div class="custom2">
This sentence is also using the 'unset' value but it
doesnt have a parent, so it follows the initial value
getting default values.
The CSS min-content is a value that can be used for sizing properties to specify the minimum size of a box or element based on its content.
It specifically suggests that text content will make use of soft-wrapping opportunities, which enable the material to resize to the length of its longest word. The min-content value is calculated based on the intrinsic minimum size required by the content inside the box.
Syntax
/* Used as a length */
width: min-content;
inline-size: min-content;
height: min-content;
block-size: min-content;
/* Used in grid tracks */
grid-template-columns: 100px 2fr min-content;
CSS min-content – Box Sizing
The following example demonstrates the use of min-content keyword for box sizing.
CSS unicode-bidi property is used to control how bidirectional text is displayed in a document. Bidirectional text contains both left-to-right (LTR) and right-to-left (RTL) text.
The unicode-bidi property allows developers to override the default behavior of the browser and ensure that bidirectional text is displayed correctly.
Possible Values
normal − This is the default value, and it specifies that the text should be displayed according to the inherent direction of the text itself. In other words, it will use the direction of the characters in the text to determine how it should be displayed.
embed − This value is used to explicitly set the direction of the text within an element. When you set unicode-bidi to embed, you can also use the direction property to specify whether the text should be displayed left-to-right (ltr) or right-to-left (rtl).
bidi-override − This value creates an override for inline elements. In case of block elements, it overrides the browser’s bi-directional text algorithm and flows the text inside any inline children strictly according to the direction property.
isolate − This value isolates the element from its siblings.
isolate-override − This value uses the isolation behavior of the isolate keyword to the surrounding content and the override behavior of the bidi-override keyword to the inner content.
plaintext − Prevents bidirectional text (BIDI) algorithms from affecting the text inside the element.
Applies to
All positioned elements, but some of the values have no effect on non-inline elements.
CSS properties unicode-bidi and direction are the only properties that are not affected by the all shorthand property.
This property is only used by Document Type Definition (DTD) designers. It is generally not recommended for web designers or similar authors to override it.
CSS unicode-bidi – normal Value
The following example demonstrates using unicode-bidi: normal, the text in its default order from right-to-left direction (RTL) −
<html><head><style>
.box {
direction: rtl;
unicode-bidi: normal;
color:red;
}
</style></head><body><h2>CSS unicode-bidi - normal Value</h2><p>The following text is displayed in its default order from right-to-left direction.</p><div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div></body></html>
CSS unicode-bidi – embed Value
The following example demonstrates using unicode-bidi: embed. This value embeds the direction of the text within its surrounding content, and when the direction is set to rtl, the text is displayed in a right-to-left (RTL) direction −
<html><head><style>
.box {
direction: rtl;
unicode-bidi: embed;
color:red;
}
</style></head><body><h2>CSS unicode-bidi - embed Value</h2><p>The following text is displayed in its default order from right-to-left direction.</p><div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div></body></html>
CSS unicode-bidi – bidi-override Value
The following example demonstrates using unicode-bidi: bidi-override. This value displays the text in reverse order, with the right most character displayed in the first position.−
}
</style></head><body><h2>CSS unicode-bidi - bidi-override Value</h2><p>The following text is displayed in reverse order of the characters in right-to-left direction.</p><div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div></body></html>
CSS unicode-bidi – isolate Value
The following example demonstrates using unicode-bidi: isolate. This value is used to isolate a bidirectional text from its surrounding text. −
<html><head><style>
.box {
direction: rtl;
unicode-bidi: isolate;
color:red;
}
</style></head><body><h2>CSS unicode-bidi - isolate Value</h2><p>The following text is displayed in its default order from right to left.</p><div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div></body></html>
CSS unicode-bidi – isolate-override Value
The following example demonstrates using unicode-bidi: isolate-override. This value is used to isolate and override the bidirectional text from its surrounding text −
}
</style></head><body><h2>CSS unicode-bidi - isolate-override Value</h2><p>The following text is displayed in reverse order of the characters in right-to-left direction.</p><div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div></body></html>
CSS unicode-bidi – plaintext Value
The following example demonstrates using unicode-bidi: plaintext. This value treats the text as plain text without applying any bidirectional text algorithms. −
}
</style></head><body><h2>CSS unicode-bidi - plaintext Value</h2><p>The following text is displayed in its default order from left-to-right direction.</p><div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div></body></html>
CSS unicode-bidi – Related Properties
Following is the list of CSS properties related to unicode-bidi:
property
value
direction
Sets the direction of text in a block-level element.
CSS writing-mode property is used to specify the direction of text content flows within an element. It specifies whether text should be displayed horizontally or vertically.
It is particularly useful for handling text orientation in non-Latin scripts, such as Chinese, Japanese, and Arabic, as well as for creating creative and visually interesting layouts.
Possible Values
horizontal-tb − Default value. It sets the text to be laid out in horizontal writing mode, where text flows from left to right and top to bottom, as in most Western languages.
vertical-rl − This value specifies a vertical writing mode from right to left, commonly used for scripts like Chinese, Japanese, or Korean. Text flows vertically, starting from the right and proceeding to the left.
vertical-lr − Similar to vertical-rl, this value also represents a vertical writing mode, but the text flows from left to right, which is used in scripts like Mongolian.
sideways-rl − This value specifies vertical text flow from top to bottom, but positions the text from right to left. This value is used for vertical scripts like Mongolian or some forms of vertical Japanese text, where the characters are rotated 90 degrees clockwise and read from right to left.
sideways-lr − This value specifies vertical text flow from bottom to top, but positions the text from left to right.
The lr, lr-tb, rl, tb, tb-lr, and tb-rl writing modes in CSS are deprecated, and should no longer be used. Instead, you should use the horizontal-tb or vertical-lr writing modes.
The following table shows the deprecated writing modes and their equivalents:
Deprecated Value
Equivalent Value
lr
horizontal-tb
rl
horizontal-tb
lr-tb
horizontal-tb
tb
vertical-lr
tb-lr
vertical-lr
tb-rl
vertical-rl
Applies to
All the HTML elements except table row groups, table column groups, table rows, and table columns.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></body></html>
CSS writing-mode – vertical-rl Value
The following example demonstartes writing-mode property set to value vertical-rl, where text is read from right to left and top to bottom −
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></body></html>
CSS writing-mode – vertical-lr Value
The following example demonstartes that the writing-mode property set to value vertical-rl value, where text is read from left to right and top to bottom: −
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div></body></html>
CSS writing-mode – sideways-rl Value
The sideways-rl value is only supported by Firefox Browser.
The following example demonstrates that writing-mode property set to value sideways-rl, where text read vertically from top to bottom, with characters arranged from right to left −
}
</style></head><body><h2>CSS writing-mode: sideways-rl - This example is only supported by Firefox Browser.</h2><div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div></body></html>
CSS writing-mode – sideways-lr Value
The sideways-lr value is only supported by Firefox Browser.
The following example demonstrates that writing-mode property set to value sideways-lr, where text is read vertically from top to bottom, with characters arranged from left to right −
}
</style></head><body><h2>CSS writing-mode: sideways-lr - This example is only supported by Firefox Browser.</h2><div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div></body></html>
CSS writing-mode – Asthetic Use (english Language)
The values vertical-lr and vertical-rl can be used in English language for asthetics as demonstrated in the following example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div></body></html>
CSS writing-mode – Related Properties
Following is the list of CSS properties related to writing-mode:
property
value
display
Sets the direction of text.
unicode-bidi
Determine the behavior of bi-directional text in a document.
text-orientation
Sets the orientation of the characters in a line.
text-combine-upright
Combines multiple typographic character units into the space of a single typographic character unit.