diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md index 7e00027af3c686d..6a31e57c9f2aa35 100644 --- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -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 { diff --git a/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md b/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md index 60c5435b75f4230..cd2ae0afd89cf69 100644 --- a/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md @@ -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 +

Play with writing modes

+``` + +```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: @@ -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 +
+
+

Heading

+

A paragraph demonstrating writing modes in CSS.

+
+
+

Heading

+

A paragraph demonstrating writing modes in CSS.

+
+
+``` + +```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. @@ -82,7 +136,47 @@ 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 +
+
+

Heading

+

A paragraph demonstrating writing modes in CSS.

+

These boxes have a width.

+
+
+

Heading

+

A paragraph demonstrating writing modes in CSS.

+

These boxes have a width.

+
+
+``` + +```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. @@ -90,7 +184,43 @@ To make this easier, CSS has recently developed a set of mapped properties. Thes 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 +
+
+

Heading

+

A paragraph demonstrating writing modes in CSS.

+

These boxes have inline-size.

+
+
+

Heading

+

A paragraph demonstrating writing modes in CSS.

+

These boxes have inline-size.

+
+
+``` + +```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 @@ -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 +
+
+

Physical Properties

+

A paragraph demonstrating logical properties in CSS.

+
+
+

Logical Properties

+

A paragraph demonstrating logical properties in CSS.

+
+
+``` + +```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). @@ -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 +
+
+ star +

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

+
+
+``` + +```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. diff --git a/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md b/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md index 462c9e1534b7ebf..8330f6df5a9d6e5 100644 --- a/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md +++ b/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md @@ -52,13 +52,47 @@ In the example below we have two boxes, both 200 pixels in size: - One contains an image that is smaller than 200 pixels — it is smaller than the box and doesn't stretch to fill it. - The other is larger than 200 pixels and overflows the box. -{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}} +```html live-sample___size +
+
+ star +
+
+ balloons +
+
+``` + +```css live-sample___size +.wrapper { + display: flex; + align-items: flex-start; +} + +.wrapper > * { + margin: 20px; +} + +.box { + border: 5px solid darkblue; + width: 200px; +} + +img { +} +``` + +{{EmbedLiveSample("size", "", "250px")}} So what can we do about the overflowing issue? As we learned in [our previous lesson](/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS), a common technique is to make the {{cssxref("max-width")}} of an image 100%. This will enable the image to become smaller in size than the box but not larger. This technique will also work with other replaced elements such as [`