Skip to content

Commit

Permalink
chore(css): Move CSS examples - Learn CSS, Building Blocks p1 (#36607)
Browse files Browse the repository at this point in the history 
* chore(css): Move CSS examples - Handling different text directions

* chore(css): Move CSS examples - Images, media, and form elements

* chore(css): Move CSS examples - Overflowing content

* chore(css): Move CSS examples - Attribute selectors

* chore(css): Move CSS examples - Combinators

* chore(css): Move CSS examples - CSS selectors

* chore(css): typo fix

* Update files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* chore(css): Move CSS examples - Combinators - use code element instead of backticks

* chore(css): Move CSS examples - Handling different text directions

---------

Co-authored-by: Estelle Weyl <[email protected]>
  • Loading branch information
@bsmth @estelle
bsmth and estelle authored Nov 2, 2024
1 parent 1ea99c8 commit 68772e8
Show file tree
Hide file tree
Showing 7 changed files with 754 additions and 89 deletions.
2 changes: 1 addition & 1 deletion files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ The individual properties include the {{cssxref("border-width")}}, {{cssxref("bo
}
```

There are longhand properities for width, style, and color for each of the four sides:
There are longhand properties for width, style, and color for each of the four sides:

```css
.box {
Expand Down
238 changes: 226 additions & 12 deletions files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,24 @@ A writing mode in CSS refers to whether the text is running horizontally or vert

In the example below we have a heading displayed using `writing-mode: vertical-rl`. The text now runs vertically. Vertical text is common in graphic design, and can be a way to add a more interesting look and feel to your web design.

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}
```html live-sample___simple-vertical
<h1>Play with writing modes</h1>
```

```css live-sample___simple-vertical
body {
font-family: sans-serif;
height: 300px;
}
h1 {
writing-mode: vertical-rl;
color: white;
background-color: black;
padding: 10px;
}
```

{{EmbedLiveSample("simple-vertical", "", "350px")}}

The three possible values for the [`writing-mode`](/en-US/docs/Web/CSS/writing-mode) property are:

Expand All @@ -58,7 +75,44 @@ We have already discussed [block and inline layout](/en-US/docs/Web/CSS/CSS_flow

If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses `writing-mode: horizontal-tb`, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses `writing-mode: vertical-rl`; this is a writing mode that is written vertically and from right to left.

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}
```html live-sample___block-inline
<div class="wrapper">
<div class="box horizontal">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
</div>
<div class="box vertical">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
</div>
</div>
```

```css live-sample___block-inline
body {
font-family: sans-serif;
height: 300px;
}
.wrapper {
display: flex;
}

.box {
border: 1px solid #ccc;
padding: 0.5em;
margin: 10px;
}

.horizontal {
writing-mode: horizontal-tb;
}

.vertical {
writing-mode: vertical-rl;
}
```

{{EmbedLiveSample("block-inline", "", "350px")}}

When we switch the writing mode, we are changing which direction is block and which is inline. In a `horizontal-tb` writing mode the block direction runs from top to bottom; in a `vertical-rl` writing mode the block direction runs right-to-left horizontally. So the **block dimension** is always the direction blocks are displayed on the page in the writing mode in use. The **inline dimension** is always the direction a sentence flows.

Expand All @@ -82,15 +136,91 @@ The reason to talk about writing modes and direction at this point in your learn

Let's take a look at our two boxes again — one with a `horizontal-tb` writing mode and one with `vertical-rl`. I have given both of these boxes a {{cssxref("width")}}. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}
```html live-sample___width
<div class="wrapper">
<div class="box horizontal">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
<div class="box vertical">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
</div>
```

```css live-sample___width
body {
font-family: sans-serif;
height: 300px;
}
.wrapper {
display: flex;
}

.box {
border: 1px solid #ccc;
padding: 0.5em;
margin: 10px;
width: 100px;
}

.horizontal {
writing-mode: horizontal-tb;
}

.vertical {
writing-mode: vertical-rl;
}
```

{{EmbedLiveSample("width", "", "350px")}}

What we really want in this scenario is to essentially swap height with width in accordance to the writing mode. When we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.

To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like `width` and `height` — with **logical**, or **flow relative** versions.

The property mapped to `width` when in a horizontal writing mode is called {{cssxref("inline-size")}} — it refers to the size in the inline dimension. The property for `height` is named {{cssxref("block-size")}} and is the size in the block dimension. You can see how this works in the example below where we have replaced `width` with `inline-size`.

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1000)}}
```html live-sample___inline-size
<div class="wrapper">
<div class="box horizontal">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
<p>These boxes have inline-size.</p>
</div>
<div class="box vertical">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
<p>These boxes have inline-size.</p>
</div>
</div>
```

```css live-sample___inline-size
.wrapper {
display: flex;
}

.box {
border: 1px solid #ccc;
padding: 0.5em;
margin: 10px;
inline-size: 100px;
}

.horizontal {
writing-mode: horizontal-tb;
}

.vertical {
writing-mode: vertical-rl;
}
```

{{EmbedLiveSample("inline-size", "", "300px")}}

### Logical margin, border, and padding properties

Expand All @@ -102,11 +232,61 @@ The {{cssxref("padding-left")}} property maps to {{cssxref("padding-inline-start

You can see a comparison between physical and logical properties below.

**If you change the writing mode of the boxes by switching the `writing-mode` property on `.box` to `vertical-rl`, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.**

**You can also see that the {{htmlelement("Heading_Elements", "h2")}} has a black `border-bottom`. Can you work out how to make that bottom border always go below the text in both writing modes?**

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1300)}}
If you change the writing mode of the boxes by switching the `writing-mode` property on `.box` to `vertical-rl`, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.

You can also see that the {{htmlelement("Heading_Elements", "h2")}} has a black `border-bottom`. Can you work out how to make that bottom border always go below the text in both writing modes?

```html live-sample___logical-mbp
<div class="wrapper">
<div class="box physical">
<h2>Physical Properties</h2>
<p>A paragraph demonstrating logical properties in CSS.</p>
</div>
<div class="box logical">
<h2>Logical Properties</h2>
<p>A paragraph demonstrating logical properties in CSS.</p>
</div>
</div>
```

```css live-sample___logical-mbp
.wrapper {
display: flex;
border: 5px solid #ccc;
}

.box {
margin-right: 30px;
inline-size: 200px;
writing-mode: horizontal-tb;
}

.logical {
margin-block-start: 20px;
padding-inline-end: 2em;
padding-block-start: 2px;
border-block-start: 5px solid pink;
border-inline-end: 10px dotted rebeccapurple;
border-block-end: 1em double orange;
border-inline-start: 1px solid black;
}

.physical {
margin-top: 20px;
padding-right: 2em;
padding-top: 2px;
border-top: 5px solid pink;
border-right: 10px dotted rebeccapurple;
border-bottom: 1em double orange;
border-left: 1px solid black;
}

h2 {
border-bottom: 5px solid black;
}
```

{{EmbedLiveSample("logical-mbp", "", "200px")}}

There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values).

Expand All @@ -116,9 +296,43 @@ We have so far looked at logical property names. There are also some properties

For example, you can float an image left to cause text to wrap round the image. You could replace `left` with `inline-start` as shown in the example below.

**Change the writing mode on this example to `vertical-rl` to see what happens to the image. Change `inline-start` to `inline-end` to change the float.**

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1000)}}
Change the writing mode on this example to `vertical-rl` to see what happens to the image. Change `inline-start` to `inline-end` to change the float:

```html live-sample___float
<div class="wrapper">
<div class="box logical">
<img
alt="star"
src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
<p>
This box uses logical properties. The star image has been floated
inline-start, it also has a margin on the inline-end and block-end.
</p>
</div>
</div>
```

```css live-sample___float
.wrapper {
display: flex;
}

.box {
margin: 10px;
padding: 0.5em;
border: 1px solid #ccc;
inline-size: 200px;
writing-mode: horizontal-tb;
}

img {
float: inline-start;
margin-inline-end: 10px;
margin-block-end: 10px;
}
```

{{EmbedLiveSample("float", "", "200px")}}

Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.

Expand Down
Loading

0 comments on commit 68772e8

Please sign in to comment.