PLAY CSS
jaen

CSS reference with playgrounds

Learn CSS by playing with it.

Drag a slider and the preview and code change together. Edit the code and the controls follow along. A reference for getting a hands-on feel for how CSS actually behaves.

Start playingStack blocksBrowse properties

Move it, see it

Change a value and watch the preview and code update instantly.

Write it, check it

Edit the code directly and the controls move along with it.

Share the exact state

Everything you change lives in the URL, so a link opens the same view.

Stack blocks, mix properties

Stack properties like blocks and they all apply to the same box. Open a block to tweak it with the same controls as its reference page.

Preview

Drag the bottom-right corner to resize

Code

.box {
  border-radius: 48px 8px;
  background: linear-gradient(
    135deg,
    #88d1c7 0%,
    #77a7d7,
    #eaac3a 100%
  );
  box-shadow: 0 1px 2px #0f172a1f, 0 16px 40px -8px #0f172a40;
}

Blocks3

  1. border-radius
    Same radius for every corner
    Elliptical corners (vertical radii after /)
    top-left48px
    top-right8px
    bottom-right48px
    bottom-left8px
    Open its page

Properties176

Each comes with notes on defaults and gotchas, plus links to MDN and the spec.

Box15

Size10

Width and height, their limits, and aspect ratio

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

width

width: 160px;

width sets the width of an element. Besides fixed lengths, you can use % of the parent or keywords that size the element from its content.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

min-width

min-width: 200px;

min-width sets a lower limit on the width of an element. Even when width, the parent, or the content would make it narrower, it never gets narrower than min-width.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

max-width

max-width: 320px;

max-width sets an upper limit on the width of an element. Even a box that stretches with its parent, like width: 100%, never gets wider than max-width. It is a staple of layouts that adapt to the screen width.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

height

height: 64px;

height sets the height of an element. With the initial auto it grows and shrinks with the content; with a length it stays that tall however much content there is.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

min-height

min-height: 12em;

min-height sets a lower limit on the height of an element. It keeps that height even with little content and grows taller when there is more, so it holds up better than a fixed height.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

max-height

max-height: 5em;

max-height sets an upper limit on the height of an element. It fits the content while there is little of it, and never gets taller than the limit when there is more. It is often paired with overflow to make long content scroll.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

inline-size

inline-size: 120px;

inline-size sets the size of an element in the direction its text runs. In horizontal text it works like width, and in vertical text like height.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

block-size

block-size: 200px;

block-size sets the size of an element in the direction its lines stack. In horizontal text it works like height, and in vertical text like width.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

aspect-ratio

aspect-ratio: 16 / 9;

aspect-ratio sets the ratio of a box's width to its height. Set only the width and the height follows the ratio. Handy for embedded videos and square thumbnails.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

box-sizing

box-sizing: border-box;

box-sizing decides whether width and height include padding and border. With border-box, the box is exactly the width and height you set.

Spacing & overflow5

Space inside and outside the box, and what happens when content overflows

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

padding

padding: 16px 40px;

padding sets the space between a box's border and its content (the inner spacing). The background color also fills the padding.

margin

margin: 24px 48px;

margin sets the space outside a box's border (the outer spacing). It separates the box from its neighbors, and auto can center it.

Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。

overflow

overflow: visible;

overflow decides what to show when the content does not fit in the box: let it spill out, clip it away, or make it scrollable.

Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。

scrollbar-width

scrollbar-width: thin;

scrollbar-width makes scrollbars thinner or hides them. You pick the thickness with a keyword; pixel values are not allowed.

Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。

scrollbar-color

scrollbar-color: #4a86cb #e6f2f0;

scrollbar-color sets the colors of the scrollbar thumb (the part you drag) and the track (the part it moves along).

Layout43Grid overview →

Grid8

Make columns and rows in a display: grid box and place items in the cells

1234

grid-template-columns

grid-template-columns: 60px 1fr 2fr;

grid-template-columns sets how many columns a grid container has and how wide each one is. Write the column sizes (tracks) in order, separated by spaces.

1234

grid-template-rows

grid-template-rows: 1fr 2fr;

grid-template-rows sets how many rows a grid container has and how tall each one is. It works like grid-template-columns: write the row sizes (tracks) from top to bottom.

1234

grid-auto-rows

grid-auto-rows: 40px 1fr;

grid-auto-rows sets the height of rows that grid-template-rows does not set, that is, the rows added automatically to fit the items.

1234

grid-auto-columns

grid-auto-columns: 40px 1fr;

grid-auto-columns sets the width of columns that grid-template-columns does not set, that is, the columns added automatically to fit the items.

1234

grid-auto-flow

grid-auto-flow: row dense;

grid-auto-flow sets whether grid items without a set position are placed along the rows or down the columns, and whether earlier empty cells get filled in.

1234

grid-column

grid-column: span 2;

grid-column goes on a grid item and sets which columns it sits in and how many columns it spans. It is a shorthand for grid-column-start and grid-column-end.

1234

grid-row

grid-row: span 2;

grid-row goes on a grid item and sets which rows it sits in and how many rows it spans. It is a shorthand for grid-row-start and grid-row-end.

1234

grid-area

grid-area: 1 / 2 / 3 / 4;

grid-area goes on a grid item and sets the rows and columns it sits in at once. It is a shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.

Alignment & gaps10

Alignment and gaps that work in both flex and grid

1234

justify-content

justify-content: space-between;

justify-content sets where items in a flexbox or grid sit along the main axis (the direction they run in) and how leftover space is shared.

1234

align-items

align-items: center;

align-items sets where items in a flexbox or grid line up along the cross axis (across the direction they run in). In a flexbox running across, that is the vertical alignment.

1234

align-content

align-content: center;

align-content sets where the wrapped lines of a flexbox, or the rows of a grid, sit as a group along the cross axis (vertically when items run across) and how leftover space is shared.

1234

gap

gap: 16px 8px;

gap sets the space between rows (row-gap) and between columns (column-gap) of items in a flexbox, grid or multi-column layout.

1234

justify-items

justify-items: center;

justify-items sets where grid items sit inside their cells along the inline axis (left to right in horizontal text), for all items at once.

1234

place-items

place-items: center;

place-items is a shorthand for align-items (vertical position) and justify-items (horizontal position). place-items: center puts grid items in the middle of their cells both ways.

1234

place-content

place-content: center;

place-content is a shorthand for align-content (vertical position of the rows as a group) and justify-content (horizontal position of the columns as a group). It decides where the content as a whole goes in the space left over in the box.

1234

align-self

align-self: center;

align-self goes on a single flex or grid item and gives it a different position on the cross axis (vertical, for a row) from the align-items of its container.

1234

justify-self

justify-self: center;

justify-self goes on a single grid item and sets where that item sits inside its cell along the inline axis (left to right in horizontal text). It overrides the justify-items of the container for that item.

1234

place-self

place-self: center;

place-self is a shorthand for align-self (vertical position) and justify-self (horizontal position). It goes on a single grid item and moves just that item inside its cell.

Floats5

Push an element to one side and let text wrap around it

12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

float

float: left;

float pushes an element to the left or right end of the line and lets the following text wrap around it.

12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

clear

clear: left;

clear moves an element down below earlier floated elements instead of letting it sit beside them.

12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。

shape-outside

shape-outside: circle(closest-side);

shape-outside sets the shape that text flows around next to a floated element. It lets text follow circles, polygons, or the opaque parts of an image instead of a rectangle.

12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。

shape-margin

shape-margin: 1em;

shape-margin adds space around the shape set by shape-outside, keeping the text that flows around it farther away.

12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。

shape-image-threshold

shape-image-threshold: 0.5;

shape-image-threshold sets, as a number from 0 to 1, how opaque a part of a shape-outside image must be to count as part of the shape.

Multi-column10

Flow text into several columns like a newspaper

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

column-count

column-count: 2;

column-count sets how many columns the text in a box flows into (multi-column layout). As in a newspaper, the text continues at the top of the second column after reaching the bottom of the first.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

column-width

column-width: 6em;

column-width sets the ideal width of columns in a multi-column layout. The box gets as many columns as fit, so the number of columns follows the box width without media queries.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

column-rule

column-rule: 2px solid #88d1c7;

column-rule sets the line drawn between the columns of a multi-column layout. It is a shorthand for column-rule-width, column-rule-style and column-rule-color.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

column-fill

column-fill: auto;

column-fill sets whether text in a multi-column layout is split so the columns are the same height, or fills the columns one after another.

The quick brown fox jumps over the lazy dog.Heading 見出し素早い茶色の狐がのろまな犬を飛び越える。

column-span

column-span: all;

column-span sets whether an element inside a multi-column layout spans all the columns, running the full width.

The quick brown fox jumps.茶色の狐が犬を飛び越える。Over the lazy dog.

break-inside

break-inside: avoid;

break-inside sets whether an element may be split at a column break or a printed page break. With avoid, it is moved to the next column or page instead when possible.

The fox.茶色の狐が跳ぶ。Over the lazy dog.

break-before

break-before: column;

break-before sets whether a column or page break happens just before an element. With column, the element starts at the top of the next column.

The fox.茶色の狐が跳ぶ。Over the lazy dog.

break-after

break-after: column;

break-after sets whether a column or page break happens just after an element. With column, whatever follows the element starts at the top of the next column.

Intro 1 Intro 2 Intro 3Line 1 Line 2 Line 3 Line 4

orphans

orphans: 3;

orphans sets the minimum number of lines of a paragraph to leave before a column or page break (at the bottom of the column or page). If that many lines do not fit, the whole paragraph moves to the next column or page.

Line 1 Line 2 Line 3 Line 4 Line 5 Line 6

widows

widows: 3;

widows sets the minimum number of lines of a paragraph to carry over after a column or page break (at the top of the next column or page). If there would be fewer, more lines are moved from the previous column.

Background11

Size, position & area6

Size, position, repetition, and scrolling of background images, and how far they paint

background-size

background-size: 50%;

background-size sets how large a background image is drawn. Give a width and height directly, or use cover and contain to fit the element.

background-repeat

background-repeat: space;

background-repeat sets whether a background image is tiled and how the tiles are laid out. The initial value, repeat, tiles it like wallpaper and cuts off the images that don’t fit at the edges.

background-position

background-position: 25% 75%;

background-position sets where a background image sits. Write the horizontal then the vertical position with keywords, lengths or percentages.

1. The quick brown fox2. The quick brown fox3. The quick brown fox4. The quick brown fox5. The quick brown fox6. The quick brown fox7. The quick brown fox8. The quick brown fox9. The quick brown fox10. The quick brown fox11. The quick brown fox12. The quick brown fox13. The quick brown fox14. The quick brown fox15. The quick brown fox16. The quick brown fox

background-attachment

background-attachment: local;

background-attachment sets whether a background image is placed against the element’s border, its contents, or the viewport, and so how it moves when you scroll.

Aa

background-clip

background-clip: text;

background-clip sets how far the background (its color and images) is painted. It can even cut the background to the shape of the text.

background-origin

background-origin: border-box;

background-origin sets the area (outside the border, inside the border, or the content) that background images are placed in.

Border6

border

border: 8px solid #88d1c7;

border is a shorthand for an element’s border. It sets border-width, border-style and border-color in any order, and any of them can be omitted.

border-radius

border-radius: 48px 8px;

border-radius rounds the corners of an element. It is a shorthand for all four corners, and a / lets you give corners different horizontal and vertical radii for an elliptical shape.

border-image

border-image: url(/border-frame.svg) 30 round;

border-image is a shorthand that cuts an image or gradient into nine pieces and draws them in place of the border lines. The corners go in the four corners, and the edges are stretched or repeated to make a frame.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

box-decoration-break

box-decoration-break: clone;

box-decoration-break sets how the background, border, padding, and rounded corners of an element split by a line or column break are drawn at the break.

outline

outline: 4px solid #4a86cb;

outline is a shorthand that draws a line outside an element. Like border, it takes a width, style and color in any order, but it never affects layout.

outline-offset

outline-offset: 12px;

outline-offset sets how far from the outer edge of the border an outline is drawn. Negative values pull it inside the element.

Effects14

Transform10

transform

transform: translateX(40px) rotate(15deg);

transform moves, rotates, scales and skews an element. List several functions separated by spaces and they combine in order.

translate

translate: 40px 20px;

translate moves an element horizontally and vertically. It does the same as the translate() function of transform, as a property separate from transform.

rotate

rotate: 30deg;

rotate turns an element. It does the same as the rotate() function of transform, as a property separate from transform.

scale

scale: 1.5;

scale makes an element larger or smaller. It does the same as the scale() function of transform, as a property separate from transform.

1234

zoom

zoom: 1.5;

zoom enlarges or shrinks an element along with its contents. Unlike scale, it pushes surrounding elements away as it grows.

transform-origin

transform-origin: left top;

transform-origin sets the point that rotation and scaling happen around. The initial value is the center of the element.

3D

perspective

perspective: 300px;

perspective sets how far away you are looking from when child elements are rotated or moved in 3D, giving them depth. The smaller the value, the closer you are: near parts look bigger and far parts smaller.

3D

perspective-origin

perspective-origin: right top;

perspective-origin sets the point of the element that you look at straight on (the vanishing point) when perspective adds depth.

3D

transform-style

transform-style: preserve-3d;

transform-style sets whether children moved in 3D share the element’s 3D space or are drawn flat onto its surface.

3D

backface-visibility

backface-visibility: hidden;

backface-visibility sets whether an element rotated in 3D so that its back faces you is shown or hidden.

Images3

object-fit

object-fit: contain;

object-fit sets how the content of an img or video fits inside the element’s frame. Use it to show images whose aspect ratio differs from the frame without distorting them.

object-position

object-position: 25% 75%;

object-position sets where the content of an img or video sits inside the element’s frame. It is written just like background-position.

image-rendering

image-rendering: pixelated;

image-rendering tells the browser whether to favor smoothness or crispness when an image is drawn larger or smaller than its size. Use it to scale up pixel art or QR codes without blurring them.

Fonts11

Text styling18

Text color1

The color of the text itself

Aa

color

color: #4a86cb;

color sets the color of text. Borders, underlines and other things written without a color also use it, and elements inside inherit it.

Lines, shadows & strokes7

Underlines and other lines, shadows, and outlined text

Aa

text-shadow

text-shadow: 2px 4px 6px #0f172a40;

text-shadow casts shadows that follow the shape of the text. Separate several shadows with commas to layer them.

Aa

text-decoration

text-decoration: underline wavy #e66465 3px;

text-decoration is a shorthand for drawing underlines, overlines and strikethroughs. It takes the line kind, style, color and thickness in any order.

Aa

-webkit-text-stroke

-webkit-text-stroke: 3px #4a86cb;

-webkit-text-stroke draws a line along the outline of the text. It is a shorthand taking a width and a color in any order.

Aa

paint-order

paint-order: stroke;

paint-order sets the order in which the fill, the stroke, and the markers of text or an SVG shape are painted. Moving a -webkit-text-stroke outline under the fill outlines text on the outside without making the letters thinner.

Aa

text-underline-offset

text-underline-offset: 12px;

text-underline-offset sets how far below the text an underline is drawn, for example to drop link underlines a little.

Typo

text-underline-position

text-underline-position: under;

text-underline-position sets where an underline is drawn: at the bottom of the text so it clears descenders such as "g" and "p", or on the left or right side in vertical text.

Typo

text-decoration-skip-ink

text-decoration-skip-ink: none;

text-decoration-skip-ink sets whether underlines and overlines break where they would cross the glyphs. With the initial value, auto, an underline breaks around descenders such as those of y and p.

Emphasis marks2

Dots set beside characters, common in vertical Japanese

Aa

text-emphasis

text-emphasis: filled sesame #e66465;

text-emphasis is a shorthand that puts an emphasis mark on every character, as in Japanese and Chinese typography. It sets the mark shape and color together.

Aa

text-emphasis-position

text-emphasis-position: under;

text-emphasis-position sets which side of the text the emphasis marks (text-emphasis) go on: above or below in horizontal text, right or left in vertical text.

Ruby2

Where small reading hints go beside the base text

明日あしたは東京とうきょう

ruby-position

ruby-position: under;

ruby-position sets whether ruby annotations (reading aids such as furigana) go above or below their base text. It applies to ruby written with the HTML <ruby> and <rt> elements.

明日あしたは東京とうきょう

ruby-align

ruby-align: start;

ruby-align sets how the shorter of a ruby annotation and its base text is laid out when their lengths differ: pushed to the start, centered, or spread out.

Quotation marks1

The quotation marks shown before and after <q> elements

She said, He told me hello.
母は父がおはようと言ったと話した。

quotes

quotes: "«" "»" "‹" "›";

quotes sets the quotation marks shown before and after <q> elements, which mark up quotations. List an opening and closing pair for each level of nesting.

Spacing & case5

Spacing between letters and words, CJK/Latin gaps, and case conversion

Aa

text-transform

text-transform: uppercase;

text-transform changes the case of letters, or half-width to full-width, purely in how the text is displayed.

Aa

letter-spacing

letter-spacing: 0.2em;

letter-spacing adds space between characters. Negative values pull them closer together.

「はじめに」を読んでから、「本編」（第一章）に進みます。

text-spacing-trim

text-spacing-trim: trim-start;

text-spacing-trim decides whether to trim the blank space in fullwidth punctuation such as Japanese brackets and commas. It can remove the half-character gaps where punctuation marks meet and at the start of a line.

CSSを7日で学ぶ

text-autospace

text-autospace: normal;

text-autospace decides whether to add a little space where Chinese or Japanese characters directly touch Latin letters or digits, so "CSSを学ぶ" reads like "CSS を学ぶ" without typing the space.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

word-spacing

word-spacing: 0.5em;

word-spacing sets extra width added to the spaces between words. Negative values pull words closer together.

Paragraphs & wrapping18

Line breaking & wrapping9

Where lines break and how spaces and long words are handled

Open https://example.com/a/very/long/path to see more. 素早い茶色の狐がのろまな犬を飛び越える。

word-break

word-break: break-all;

word-break changes the rules for where lines may wrap. It can break English words mid-word or wrap Japanese at phrase boundaries.

Open https://example.com/a/very/long/path to see more. 素早い茶色の狐がのろまな犬を飛び越える。

overflow-wrap

overflow-wrap: anywhere;

overflow-wrap sets whether long words and URLs that would overflow their box may wrap in the middle.

駅前にできた新しいお店でコーヒーを飲みました。ちょっと苦かったけれど、周りの人々は「おいしい」と言います。

line-break

line-break: strict;

line-break sets how strict the rules are that keep punctuation, small kana such as "っ", and similar characters from starting a line. It mainly matters for Japanese and Chinese text.

Internationalization needs extra­ordinary typo­graphic care.

hyphens

hyphens: auto;

hyphens decides whether a word that does not fit on a line may be split, with a hyphen (-) added before the break. In languages that separate words with spaces, such as English, it evens out the ragged right edge.

Internationalization needs extra­ordinary typo­graphic care.

hyphenate-character

hyphenate-character: "=";

hyphenate-character sets the character shown where a word is split at the end of a line, normally a hyphen.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

white-space

white-space: pre-wrap;

white-space decides how the spaces and line breaks written in the HTML are handled, and whether lines wrap.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

white-space-collapse

white-space-collapse: preserve;

white-space-collapse sets whether runs of spaces and line breaks written in the HTML collapse into one, or stay as written. It is the part of white-space that does not cover wrapping.

if (ok) { for (x of xs) { log(x) } }

tab-size

tab-size: 4;

tab-size sets the width of one tab character. A number means that many spaces; a length sets the width directly. It is often used to set the indent width when showing code.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

text-wrap

text-wrap: balance;

text-wrap decides whether lines wrap and how the break points are chosen. It can even out the line lengths of a heading or avoid a single word on the last line.

Text box trimming2

Trim the extra space above and below lines

Hxpあ

text-box-trim

text-box-trim: trim-both;

text-box-trim removes the space outside the text above the first line and below the last line of a block. It fixes text that looks too low even with equal top and bottom padding.

Hxpあ

text-box-edge

text-box-edge: cap alphabetic;

text-box-edge sets how far text-box-trim cuts into the text, such as to the top of capital letters or to the baseline, so the space above and below the text can match.

Lists3

りんご
Banana
みかん

list-style-type

list-style-type: decimal;

list-style-type sets the kind of marker in front of each list item. Besides bullets and numbers, it offers counting systems such as Japanese iroha order and kanji numerals, or any character you like.

りんご
Banana
みかん

list-style-position

list-style-position: inside;

list-style-position sets whether the list marker sits outside the item or inside it.

りんご
Banana
みかん

list-style-image

list-style-image: url(/marker-star.svg);

list-style-image uses an image instead of a bullet or number as the marker at the start of each list item. If the image cannot be loaded, the list-style-type marker is shown instead.

Tables5

果物の数
個数
りんご3
みかん5

border-collapse

border-collapse: collapse;

border-collapse decides whether table cells draw their own separate borders or share a single border with their neighbors.

果物の数
個数
りんご3
みかん5

border-spacing

border-spacing: 0.5em 0.25em;

border-spacing sets how much space to leave between the cells of a table.

果物の数
個数
りんご3
みかん5

caption-side

caption-side: bottom;

caption-side sets whether a table’s caption (the caption element) goes above or below the table.

果物の数
個数
りんご3
みかん5

empty-cells

empty-cells: hide;

empty-cells sets whether the borders and background of empty table cells are drawn.

果物の数
個数
りんご（ふじ）3
みかん5

table-layout

table-layout: fixed;

table-layout sets whether table column widths come from the contents of the cells, or only from the table width and the first row.

Writing modes5

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

writing-mode

writing-mode: vertical-rl;

writing-mode sets whether text runs horizontally or vertically, and which way lines advance. Japanese vertical text uses vertical-rl.

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

text-orientation

text-orientation: upright;

text-orientation sets whether characters stand upright or lie sideways in vertical text. Use it to stack Latin letters upright.

今日は10月17日。午後3時30分に駅の2番出口で会いましょう。

text-combine-upright

text-combine-upright: all;

text-combine-upright sets characters such as digits side by side within the space of one character in vertical text. Known in Japanese typesetting as tate-chu-yoko, it keeps numbers like "10" or "30" upright and easy to read.

Hello, world!
こんにちは、世界！
مرحبا بالعالم!

direction

direction: rtl;

direction sets whether characters in a line run left to right (ltr) or right to left (rtl). Use it for languages written right to left, such as Arabic and Hebrew.

Hello, world!
こんにちは、世界！
مرحبا بالعالم!

unicode-bidi

unicode-bidi: plaintext;

unicode-bidi sets, for text that mixes right-to-left and left-to-right scripts, whether an element's content is ordered apart from its surroundings or in a forced order that ignores each character's direction. Use it together with direction.

Interaction14

PLAY CSS