From ddd954079f98ad27a549bacd438b43fc62949525 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Wed, 1 May 2024 20:48:38 -0700
Subject: [PATCH 01/16] Draft: new guide: aspect-ratio

---
 .../understanding_aspect-ratio/flag.jpg       | Bin 0 -> 8350 bytes
 .../understanding_aspect-ratio/index.md       | 138 ++++++++++++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/flag.jpg
 create mode 100644 files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md

diff --git a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/flag.jpg b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/flag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d4a97c5c8bc250296c87224f02a4a0204b57271f
GIT binary patch
literal 8350
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
DPK9I}

literal 0
HcmV?d00001

diff --git a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
new file mode 100644
index 000000000000000..9778431c2364663
--- /dev/null
+++ b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
@@ -0,0 +1,138 @@
+---
+title: Understanding aspect-ratio
+slug: Web/CSS/CSS_box_sizing/Understanding_aspect-ratio
+page-type: guide
+spec-urls: https://drafts.csswg.org/css-sizing/#aspect-ratio
+---
+
+This guide will focus on element aspect ratios and controlling aspect ratio with CSS for design esthetics and to improved user experience and page loading performance.
+
+## Understanding aspect ratio
+
+When an element is rendered to the page, if no CSS is applied and no HTML sizing attributes are included, the user agent will render the object at its natural size.
+
+Every element rendered to the page has a height, a width, and an {{glossary("aspect ratio")}}, which is the ratio between the width and height. These natural dimensions, the size of the media object without any sizing, scaling, zooming, or borders applied, is its natural or {{glossary("intrinsic size")}}. An element's intrinsic size is determined by the element itself, not by any formatting ([box sizing](/en-US/docs/Web/CSS/CSS_box_sizing), border, marging, padding, etc.) applied.
+
+Replaced elements like {{htmlelement("img")}} and {{htmlelement("video")}} are replaced with media that have set dimensions and therefore an intrinsic aspect ratio. If this content is auto-sized or you provide a size for only one dimension, such as the width, and browser will automatically resize the other dimension, in this case the height, maintaining the media's original aspect ratio.
+
+Consider a raster image, such as a JPEG, PNG, or GIF. If you place an image on a page and do not set a height or width, either via {{htmlelement("img")}} attributes or with CSS, it will be displayed at its intrinsic size. If a single dimension is set on the image, such as `width: 100%`, the user agent will preserve its aspect ratio.
+
+In this example, the image is displayed at `55px` wide, `110px` wide, and at its natural [`width: auto`](/en-US/docs/Web/CSS/width) size of `220px`.
+
+```html hidden live-sample___image
+<img src="flag.jpg" alt="Pride flag" />
+<img src="flag.jpg" alt="Pride flag" />
+<img src="flag.jpg" alt="Pride flag" />
+```
+
+```css hidden live-sample___image
+img {
+  width: 55px;
+  margin-right: 5px;
+}
+img + img {
+  width: 110px;
+}
+img + img + img {
+  width: auto;
+}
+```
+
+{{EmbedLiveSample("image", "100", "230")}}
+
+Only when you provide sizes for both dimensions is there a risk of distorting the media. For example, if you set a variable aspect ratio, such as by setting `width: 100vw; height: 100vh;`, the image will appear either stretched or squashed if the viewport's aspect ratio differs from the images aspect ratio.
+
+In this examples, the same image is repeated three times, explicitly sized with the same {{cssxref("height")}} value (`110px`) but different {{cssxref("width")}} values (`55px`, `110px`, and `220px`):
+
+```html hidden live-sample___imagebad
+<img src="flag.jpg" alt="Pride flag" />
+<img src="flag.jpg" alt="Pride flag" />
+<img src="flag.jpg" alt="Pride flag" />
+```
+
+```css hidden live-sample___imagebad
+img {
+  width: 55px;
+  height: 110px;
+}
+img + img {
+  width: 110px;
+}
+img + img + img {
+  width: 220px;
+}
+```
+
+{{EmbedLiveSample("imagebad", "100", "120")}}
+
+Declaring both a width and height distorted these images, squashing the first one and stretching the third.
+
+While the aspect-ratio of a replaced element is maintained by default, when the intrinsic size of a non-replaced element is changed the aspect ratio usually changes. For example, identical content may be two lines on a wide screen or in a wide parent container and six lines on a narrow screen or container.
+
+In this example, the same quote is displayed in `200px` and `800px` wide containers:
+
+```html hidden live-sample___alder
+<p>Narrow:</p>
+<blockquote>
+  <q
+    >When you stop living your life based on what others think of you real life
+    begins. At that moment, you will finally see the door of self acceptance
+    opened.</q
+  >
+  - Shannon L. Alder
+</blockquote>
+<p>Wide:</p>
+<blockquote>
+  <q
+    >When you stop living your life based on what others think of you real life
+    begins. At that moment, you will finally see the door of self acceptance
+    opened.</q
+  >
+  - Shannon L. Alder
+</blockquote>
+```
+
+```css hidden live-sample___alder
+blockquote {
+  border: 3px dotted #ccc;
+  padding: 0 3px;
+  width: 200px;
+  margin: 20px 0;
+}
+blockquote:last-of-type {
+  width: 800px;
+}
+```
+
+{{EmbedLiveSample("alder", "100", "300")}}
+
+With CSS, we can also set an aspect ratio on non-replaced elements:
+
+```html hidden live-sample___alder2
+<p>Short text:</p>
+<blockquote>Breath.</blockquote>
+<p>longer text:</p>
+<blockquote>You're perfect just as you are.</blockquote>
+```
+
+```css live-sample___alder2
+blockquote {
+  inline-size: max-content;
+  aspect-ratio: 1;
+}
+```
+
+In this example, the blockquotes are as wide as they need to be to fit the content. The width effect was accomplished by setting the {{cssxref("inline-size")}} to {{cssxref("max-content")}}. The square effect was accomplished with the CSS {{cssxref("aspect-ratio")}} property. The value of `1` creates a square; the block direction is defined to be as tall as the element is wide, without the use of the {{cssxref("height")}} or {{cssxref("block-size")}} properties.
+
+```css hidden live-sample___alder2
+blockquote {
+  border: 3px dotted #ccc;
+  padding: 0 3px;
+  margin: 20px 0;
+  background-color: #ededed;
+}
+```
+
+{{EmbedLiveSample("alder2", "100", "400")}}
+
+We've always been able to preserve a replaced element's aspect ratio. The rest of this article focuses on setting aspect ratios for non-replaced elements.

From a37c35da2644787b4228a30529eda712368633f4 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Fri, 3 May 2024 16:46:11 -0700
Subject: [PATCH 02/16] add use cases

---
 .../understanding_aspect-ratio/index.md       | 103 +++++++++++++++---
 1 file changed, 90 insertions(+), 13 deletions(-)

diff --git a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
index 9778431c2364663..b6e552edef0c250 100644
--- a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
+++ b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
@@ -5,19 +5,23 @@ page-type: guide
 spec-urls: https://drafts.csswg.org/css-sizing/#aspect-ratio
 ---
 
-This guide will focus on element aspect ratios and controlling aspect ratio with CSS for design esthetics and to improved user experience and page loading performance.
+When developing responsive sites, you often want to be able to set the inline-direction size to a percentage and have the block-direction change size proportionally, maintaining a specific aspect ratio. When it comes to images and video, maintaining these replaced elements' aspect ratio is not only necessary for {{glossary("responsive web design")}}, but it's a vital component of good user experience by preventing cumulative {{domxref("LayoutShift", "layout shift")}}.
+
+With CSS, we can size replaced and non-replaced elements based on their aspect ratio. In this guide, we discuss controlling aspect ratio with CSS for design aesthetics and to improve user experience and page loading performance.
 
 ## Understanding aspect ratio
 
 When an element is rendered to the page, if no CSS is applied and no HTML sizing attributes are included, the user agent will render the object at its natural size.
 
-Every element rendered to the page has a height, a width, and an {{glossary("aspect ratio")}}, which is the ratio between the width and height. These natural dimensions, the size of the media object without any sizing, scaling, zooming, or borders applied, is its natural or {{glossary("intrinsic size")}}. An element's intrinsic size is determined by the element itself, not by any formatting ([box sizing](/en-US/docs/Web/CSS/CSS_box_sizing), border, marging, padding, etc.) applied.
+Every element rendered to the page has a height and a width, and, therefore, an {{glossary("aspect ratio")}}, which is the ratio between the width and height. These natural dimensions, the size of the media object without any sizing, scaling, zooming, or borders applied, is its natural or {{glossary("intrinsic size")}}. An element's intrinsic size is determined by the element itself, not by any formatting ([box sizing](/en-US/docs/Web/CSS/CSS_box_sizing), border, marging, padding, etc.) applied.
+
+### Replaced elements
 
-Replaced elements like {{htmlelement("img")}} and {{htmlelement("video")}} are replaced with media that have set dimensions and therefore an intrinsic aspect ratio. If this content is auto-sized or you provide a size for only one dimension, such as the width, and browser will automatically resize the other dimension, in this case the height, maintaining the media's original aspect ratio.
+Replaced elements like {{htmlelement("img")}} and {{htmlelement("video")}} are replaced with media that have set dimensions and therefore an intrinsic aspect ratio. Consider a raster image, such as a JPEG, PNG, or GIF. If you place an image on a page and do not set a height or width, either via {{htmlelement("img")}} attributes or with CSS, it will be displayed at its intrinsic size.
 
-Consider a raster image, such as a JPEG, PNG, or GIF. If you place an image on a page and do not set a height or width, either via {{htmlelement("img")}} attributes or with CSS, it will be displayed at its intrinsic size. If a single dimension is set on the image, such as `width: 100%`, the user agent will preserve its aspect ratio.
+If this content is auto-sized or you provide a size for only one dimension, such as the width, and browser will automatically resize the other dimension, in this case the height, maintaining the media's original aspect ratio.
 
-In this example, the image is displayed at `55px` wide, `110px` wide, and at its natural [`width: auto`](/en-US/docs/Web/CSS/width) size of `220px`.
+In this example, a single dimension is set on the image, so the user agent preserves the image's aspect ratio. The image is displayed at `width: 55px`, `width: 110px`, and at its natural [`width: auto`](/en-US/docs/Web/CSS/width) size of `220px`.
 
 ```html hidden live-sample___image
 <img src="flag.jpg" alt="Pride flag" />
@@ -40,9 +44,9 @@ img + img + img {
 
 {{EmbedLiveSample("image", "100", "230")}}
 
-Only when you provide sizes for both dimensions is there a risk of distorting the media. For example, if you set a variable aspect ratio, such as by setting `width: 100vw; height: 100vh;`, the image will appear either stretched or squashed if the viewport's aspect ratio differs from the images aspect ratio.
+Only when you provide sizes for both dimensions is there a risk of distorting the replaced element. For example, setting `width: 100vw; height: 100vh;` on an image creates a variable aspect ratio; the image will appear either stretched or squashed when the viewport's aspect ratio differs from the image's natural aspect ratio.
 
-In this examples, the same image is repeated three times, explicitly sized with the same {{cssxref("height")}} value (`110px`) but different {{cssxref("width")}} values (`55px`, `110px`, and `220px`):
+In this example, the same image is repeated three times, explicitly sized with the same {{cssxref("height")}} value (`110px`) but different {{cssxref("width")}} values (`55px`, `110px`, and `220px`):
 
 ```html hidden live-sample___imagebad
 <img src="flag.jpg" alt="Pride flag" />
@@ -67,7 +71,9 @@ img + img + img {
 
 Declaring both a width and height distorted these images, squashing the first one and stretching the third.
 
-While the aspect-ratio of a replaced element is maintained by default, when the intrinsic size of a non-replaced element is changed the aspect ratio usually changes. For example, identical content may be two lines on a wide screen or in a wide parent container and six lines on a narrow screen or container.
+### Non-replaced elements
+
+While the aspect ratio of a replaced element is maintained by default, when the intrinsic size of a non-replaced element is changed the aspect ratio usually changes. For example, identical content may be two lines on a widescreen or in a wide parent container and six lines on a narrow screen or container.
 
 In this example, the same quote is displayed in `200px` and `800px` wide containers:
 
@@ -108,14 +114,14 @@ blockquote:last-of-type {
 
 With CSS, we can also set an aspect ratio on non-replaced elements:
 
-```html hidden live-sample___alder2
+```html hidden live-sample___words
 <p>Short text:</p>
 <blockquote>Breath.</blockquote>
 <p>longer text:</p>
 <blockquote>You're perfect just as you are.</blockquote>
 ```
 
-```css live-sample___alder2
+```css live-sample___words
 blockquote {
   inline-size: max-content;
   aspect-ratio: 1;
@@ -124,7 +130,7 @@ blockquote {
 
 In this example, the blockquotes are as wide as they need to be to fit the content. The width effect was accomplished by setting the {{cssxref("inline-size")}} to {{cssxref("max-content")}}. The square effect was accomplished with the CSS {{cssxref("aspect-ratio")}} property. The value of `1` creates a square; the block direction is defined to be as tall as the element is wide, without the use of the {{cssxref("height")}} or {{cssxref("block-size")}} properties.
 
-```css hidden live-sample___alder2
+```css hidden live-sample___words
 blockquote {
   border: 3px dotted #ccc;
   padding: 0 3px;
@@ -133,6 +139,77 @@ blockquote {
 }
 ```
 
-{{EmbedLiveSample("alder2", "100", "400")}}
+{{EmbedLiveSample("words", "100", "400")}}
+
+We've always been able to preserve a replaced element's aspect ratio. With the CSS {{cssxref("aspect-ratio")}} property, we are able to specify aspect ratios for both replaced and non-replaced elements. This property can also be used to change the aspect ratio of replaced elements to something other than the object's intrinsic aspect ratio, but you likely don't want to do that.
+
+## Common use cases
+
+### Responsive external assets
+
+When embedding content from third party sites, such as videos from TikTok, Youtube, or Instagram, you want the content to be responsive. The code snippet you include on your website that includes these external videos generally creates and {{htmlelement("iframe")}} which includes the video.
+
+While every {{htmlelement("video")}} element has the aspect ratio of its media file, we're including an `<iframe>`, not a `<video>`. We need the `<iframe>` to be responsive while always maintaining the aspect ratio of the video it contains. We may want to set the iframe's width to `100%` of its container or `100vw` to be as wide as the viewport regardless of the viewport's size. Setting a height might stretch or squash the video. Instead, we set the `aspect-ratio` of the video's container to be the same aspect ratio as the video. Problem solved!
+
+The standard aspect ratio for YouTube on a computer is 16:9. For Tiktok and Instagram, it's 9:16.
+
+```css
+.youtube {
+  aspect-ratio: 16/9;
+}
+.instagram,
+.tiktok {
+  aspect-ratio: 9/16;
+}
+```
+
+If we want the iframe and the video it contains to be as large as possible while being 100% visible and, of course, while maintaining the aspect ratio, we can use the `aspect-ratio` feature of the `@media` media query.
+
+We set the landscape sized Youtube to be as wide as the viewport and both portrait-sized Titkok and Instagram to be as tall as the viewport. However, if a viewport's aspect ratio is wider than 16:9, Youtube is set to be only as tall as the viewport. If the viewport is narrower than 9:16, Instagram and Tiktok are set to be only as wide as the viewport.
+
+```css
+.youtube {
+  aspect-ratio: 16/9;
+  width: 100vw;
+  height: auto;
+}
+.instagram,
+.tiktok {
+  aspect-ratio: 9/16;
+  height: 100vh;
+  width: auto;
+}
+
+@media (aspect-ratio > 16 / 9) {
+  .youtube {
+    width: auto;
+    height: 100vh;
+  }
+}
+@media (aspect-ratio < 9 / 16) {
+  .instagram,
+  .tiktok {
+    height: auto;
+    width: 100vw;
+  }
+}
+```
+
+### Grid of square cells
 
-We've always been able to preserve a replaced element's aspect ratio. The rest of this article focuses on setting aspect ratios for non-replaced elements.
+A grid of square cells can be created by defining fixed column track sizes with each row being the same size as the column track. However, when creating responsive grids using `auto-fill` to fit as many column tracks as will fit in the container, we don't know what the width of each item, so we don't know what height to set to create square items.
+
+By setting an aspect ratio on the items, we can ensure when the grid items are laid out, each grid item will be as tall as it is wide, creating square grid items no matter the width or height.
+
+In this square grid item example, the grid tracks are auto-sized, taking their size from the items, with the height being sized by the `aspect-ratio` to be as tall as they are wide:
+
+```css
+.grid {
+  display: grid;
+  grid-template-columns: repeat(autofill, minmax(150px, 1fr));
+}
+
+.item {
+  aspect-ratio: 1;
+}
+```

From 940883f2907776ce596d0e4da1960b345d25ccfe Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Mon, 6 May 2024 10:12:35 -0700
Subject: [PATCH 03/16] current status

---
 .../understanding_aspect-ratio/index.md       | 53 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
index b6e552edef0c250..4270cd3e3df3f11 100644
--- a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
+++ b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
@@ -71,6 +71,20 @@ img + img + img {
 
 Declaring both a width and height distorted these images, squashing the first one and stretching the third.
 
+In this examples, we used `height` and `width` to distort the image. By default, if only one of these values is set, the aspect ratio of a replaced element is preserved. We can set the {{cssxref("aspect-ratio")}} property to something other than the object's intrinsic aspect ratio to distort it. You likely don't want to do that, but it's possible.
+
+```html hidden live-sample___stretch
+<img src="flag.jpg" alt="Pride flag" />
+```
+
+```css hidden live-sample___stretch
+img {
+  aspect-ratio: 3;
+}
+```
+
+{{EmbedLiveSample("stretch", "100", "230")}}
+
 ### Non-replaced elements
 
 While the aspect ratio of a replaced element is maintained by default, when the intrinsic size of a non-replaced element is changed the aspect ratio usually changes. For example, identical content may be two lines on a widescreen or in a wide parent container and six lines on a narrow screen or container.
@@ -141,7 +155,7 @@ blockquote {
 
 {{EmbedLiveSample("words", "100", "400")}}
 
-We've always been able to preserve a replaced element's aspect ratio. With the CSS {{cssxref("aspect-ratio")}} property, we are able to specify aspect ratios for both replaced and non-replaced elements. This property can also be used to change the aspect ratio of replaced elements to something other than the object's intrinsic aspect ratio, but you likely don't want to do that.
+We've always been able to preserve a replaced element's aspect ratio. With the CSS {{cssxref("aspect-ratio")}} property, we can specify aspect ratios for both replaced and non-replaced elements.
 
 ## Common use cases
 
@@ -206,10 +220,45 @@ In this square grid item example, the grid tracks are auto-sized, taking their s
 ```css
 .grid {
   display: grid;
-  grid-template-columns: repeat(autofill, minmax(150px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 }
 
 .item {
   aspect-ratio: 1;
 }
 ```
+
+```css hidden
+div {
+  gap: 20px;
+}
+
+div div {
+  background-color: #ccc;
+  aspect-ratio: 1;
+  counter-increment: items;
+}
+div div:after {
+  content: counter(items);
+}
+```
+
+```html hidden
+<div class="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```

From 949c355112ea8b2cd2be94cfbbf4a8f6601ca79e Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Tue, 7 May 2024 00:09:41 -0700
Subject: [PATCH 04/16] new guide: aspect ratio

---
 .../understanding_aspect-ratio/index.md       | 282 ++++++++++++++++--
 1 file changed, 254 insertions(+), 28 deletions(-)

diff --git a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
index 4270cd3e3df3f11..559e449e205ea59 100644
--- a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
+++ b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
@@ -5,23 +5,100 @@ page-type: guide
 spec-urls: https://drafts.csswg.org/css-sizing/#aspect-ratio
 ---
 
+{{CSSRef}}
+
 When developing responsive sites, you often want to be able to set the inline-direction size to a percentage and have the block-direction change size proportionally, maintaining a specific aspect ratio. When it comes to images and video, maintaining these replaced elements' aspect ratio is not only necessary for {{glossary("responsive web design")}}, but it's a vital component of good user experience by preventing cumulative {{domxref("LayoutShift", "layout shift")}}.
 
 With CSS, we can size replaced and non-replaced elements based on their aspect ratio. In this guide, we discuss controlling aspect ratio with CSS for design aesthetics and to improve user experience and page loading performance.
 
+In this guide, we learn about the `aspect-ratio` property, discuss aspect ratios for replaced and non-replaced elements, and then examine some common aspect ratio use cases.
+
+### CSS `aspect-ratio` property
+
+The CSS {{cssxref("aspect-ratio")}} property value defines the preferred width-to-height ratio of an element's box. The value is either a {{cssxref("ratio")}}, the keyword `auto`, or a space-separated combination of both.
+
+The `<ratio>` is the ratio of the width and height, in that order. It is represented by two positive {{cssxref("number")}} values separated by a forward slash (`/`) or a single `<number>`. When a single number is used, it is the same as writing the ratio as `<number> / 1`, which is also the width divided by the height.
+
+The following values are all equivalent:
+
+```css
+aspect-ratio: 3 / 6;
+aspect-ratio: 1 / 2;
+aspect-ratio: 0.5 / 1;
+aspect-ratio: 0.5;
+```
+
+The following values are also all equivalent:
+
+```css
+aspect-ratio: 9/6;
+aspect-ratio: 3/2;
+aspect-ratio: 1.5;
+```
+
+```html hidden live-sample___number
+<div>0.5</div>
+<div>1.5</div>
+```
+
+```css hidden live-sample___number
+div {
+  height: 121px;
+  aspect-ratio: 0.5;
+  background-color: pink;
+  line-height: 100px;
+  text-align: center;
+  float: left;
+  background-image: repeating-linear-gradient(
+      to right,
+      black 0px 1px,
+      transparent 1px 20px
+    ), repeating-linear-gradient(black 0px 1px, transparent 1px 20px);
+  background-size:
+    181px 5px,
+    5px 121px;
+  background-repeat: no-repeat;
+}
+div + div {
+  aspect-ratio: 1.5;
+  background-color: lightgreen;
+  margin-left: 10px;
+}
+```
+
+{{EmbedLiveSample("number", "100", "130")}}
+
+The effect of the `auto` keyword depends on whether the element on which it is applied is a replaced element or not. For replaced elements with an intrinsic aspect ratio, `auto` means the intrinsic aspect ratio should be used. In all other instances, the `auto` value means the box has no preferred aspect ratio. In both cases, this is the default behavior as if no `aspect-ratio` property were applied.
+
+When the value contains both the `auto` keyword and a `<ratio>` value, such as `aspect-ratio: auto 2 / 3;` or `aspect-ratio: 0.75 auto;`, the `auto` value is applied to replaced elements with a natural aspect ratio and the specified ratio of the `width` / `height` or `<number>` is used as the preferred aspect ratio.
+
+You will have noticed the word "preferred" in the definitions above. The `aspect-ratio` value is not always applied when set. The `aspect-ratio` property sets a "preferred" aspect ratio, so only ever has an effect if at least one of the box's sizes is automatic.
+
+When both the height and width or inline and block sizes are explicitly set, the `aspect-ratio` property value is ignored. In this case, there is no dimension that is allowed to be automatically sized - the preferred sizes are explicitly set - so the `aspect-ratio` property has no effect. When you declare both the inline and block dimensions, those take precedence.
+
+With replaced elements, if you don't explicitly set a value (other than `auto`) to either dimension, both will default to their intrinsic size (any `aspect-ratio` value isn't applied). The `aspect-ratio` will apply to non-replaced elements that don't have a dimension explicitly set, as non-replaced elements are either [intrinsically](/en-US/docs/Glossary/Intrinsic_Size) or [extrinsically](/en-US/docs/Glossary/Intrinsic_Size#extrinsic_sizing) sized, getting their size from their content, container, [box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model)properties, etc.
+
 ## Understanding aspect ratio
 
 When an element is rendered to the page, if no CSS is applied and no HTML sizing attributes are included, the user agent will render the object at its natural size.
 
-Every element rendered to the page has a height and a width, and, therefore, an {{glossary("aspect ratio")}}, which is the ratio between the width and height. These natural dimensions, the size of the media object without any sizing, scaling, zooming, or borders applied, is its natural or {{glossary("intrinsic size")}}. An element's intrinsic size is determined by the element itself, not by any formatting ([box sizing](/en-US/docs/Web/CSS/CSS_box_sizing), border, marging, padding, etc.) applied.
+Every element rendered to the page has a height and a width, and, therefore, an {{glossary("aspect ratio")}}, which is the ratio between the width and height. These natural dimensions, the size of the media object without any sizing, scaling, zooming, or borders applied, is its natural or {{glossary("intrinsic size")}}. An element's intrinsic size is determined by the element itself, not by any formatting ([box sizing](/en-US/docs/Web/CSS/CSS_box_sizing), border, margin, padding, etc.) applied.
 
 ### Replaced elements
 
-Replaced elements like {{htmlelement("img")}} and {{htmlelement("video")}} are replaced with media that have set dimensions and therefore an intrinsic aspect ratio. Consider a raster image, such as a JPEG, PNG, or GIF. If you place an image on a page and do not set a height or width, either via {{htmlelement("img")}} attributes or with CSS, it will be displayed at its intrinsic size.
+Replaced elements like {{htmlelement("img")}} and {{htmlelement("video")}} are replaced with media that have set dimensions and, therefore, an intrinsic aspect ratio. Consider a raster image, such as a JPEG, PNG, or GIF. If you place an image on a page and do not set a height or width, either via {{htmlelement("img")}} attributes or with CSS, it will be displayed at its intrinsic size.
+
+```html hidden live-sample___original
+<img src="flag.jpg" alt="Pride flag" />
+```
+
+{{EmbedLiveSample("original", "100", "230")}}
 
-If this content is auto-sized or you provide a size for only one dimension, such as the width, and browser will automatically resize the other dimension, in this case the height, maintaining the media's original aspect ratio.
+This is a 220px square image with no CSS applied; it is displayed at its intrinsic or default size.
 
-In this example, a single dimension is set on the image, so the user agent preserves the image's aspect ratio. The image is displayed at `width: 55px`, `width: 110px`, and at its natural [`width: auto`](/en-US/docs/Web/CSS/width) size of `220px`.
+If replaced content is auto-sized or you provide a size for only one dimension, such as the width, the browser will automatically resize the other dimension, in this case, the height, maintaining the media's original aspect ratio.
+
+In this example, a single dimension is set on the image, so the user agent preserves its aspect ratio. The image is displayed at `width: 55px`, `width: 110px`, and at its natural [`width: auto`](/en-US/docs/Web/CSS/width) size of `220px`.
 
 ```html hidden live-sample___image
 <img src="flag.jpg" alt="Pride flag" />
@@ -69,27 +146,85 @@ img + img + img {
 
 {{EmbedLiveSample("imagebad", "100", "120")}}
 
-Declaring both a width and height distorted these images, squashing the first one and stretching the third.
+In this example, we used `height` and `width` to distort the image. We squashed the first one and stretched the third.
 
-In this examples, we used `height` and `width` to distort the image. By default, if only one of these values is set, the aspect ratio of a replaced element is preserved. We can set the {{cssxref("aspect-ratio")}} property to something other than the object's intrinsic aspect ratio to distort it. You likely don't want to do that, but it's possible.
+We could have created this same distorted effect using the CSS {{cssxref("aspect-ratio")}} property, by setting a single dimension (not both or neither) and providing a value other than `1` (or `1 / 1`). You likely don't want to do this, but it's good to know that it's possible.
 
 ```html hidden live-sample___stretch
 <img src="flag.jpg" alt="Pride flag" />
 ```
 
-```css hidden live-sample___stretch
+```css live-sample___stretch
 img {
+  height: 100vh;
   aspect-ratio: 3;
 }
 ```
 
 {{EmbedLiveSample("stretch", "100", "230")}}
 
+Here we declared a single dimension (in this case, `100vh` is the full height of the example {{htmlement("iframe")}} viewport). For `aspect-ratio` to apply to replaced elements, one dimension must be set. Setting both or neither doesn't work.
+
+To fit a replaced element to the content of its container while maintaining its intrinsic aspect ratio, set the {{cssxref("object-fit")}} property set to `cover` or `contain`. This will resize the replaced element and either clip it to "cover" the container or display it at a smaller size fully "contained" within it.
+
+In this example, we're placing our square image into a grid of three items with an aspect ratio of `5 / 2`.
+
+We include a container with three items, each with one image:
+
+```html live-sample___imagegrid
+<div class="grid">
+  <div>
+    <img src="flag.jpg" alt="Pride flag" />
+  </div>
+  <div>
+    <img class="cover" src="flag.jpg" alt="Pride flag" />
+  </div>
+  <div>
+    <img class="contain" src="flag.jpg" alt="Pride flag" />
+  </div>
+</div>
+```
+
+We create a grid with each item having an aspect ratio of 2.5 with a minimum width of `150px`, and therefore a minimum height of 60px, but the final width and height will be determined by the width of the example's iframe, which is based on your viewport size:
+
+```css live-sample___imagegrid
+.grid {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  font-size: 0; /* to minimize whitespace */
+}
+
+div div {
+  aspect-ratio: 5 / 2;
+  background-color: #ccc;
+}
+```
+
+We then size the images and set the `object-fit` property on the last two images:
+
+```css live-sample___imagegrid
+img {
+  height: 100%;
+  width: 100%;
+}
+.cover {
+  object-fit: cover;
+}
+.contain {
+  object-fit: contain;
+}
+```
+
+{{EmbedLiveSample("imagegrid", "100", "100")}}
+
+Only the first image is distorted (stretched). We could have used the `fill` value of `object-fit` to create the same effect. The `cover` image is the full width of the container, centered vertically, and clipped to fit in the container. The `contain` value is contained; shrunk to fit and centered horizontally.
+
 ### Non-replaced elements
 
-While the aspect ratio of a replaced element is maintained by default, when the intrinsic size of a non-replaced element is changed the aspect ratio usually changes. For example, identical content may be two lines on a widescreen or in a wide parent container and six lines on a narrow screen or container.
+While the aspect ratio of a replaced element is maintained by default, when the intrinsic size of a non-replaced element is changed the aspect ratio usually changes. For example, identical content may be three lines on a widescreen or in a wide parent container and eight lines on a narrow screen or container.
 
-In this example, the same quote is displayed in `200px` and `800px` wide containers:
+In this example, the same quote is displayed in `200px` and `600px` wide containers, and a square set with a height matching its `200px` width:
 
 ```html hidden live-sample___alder
 <p>Narrow:</p>
@@ -110,23 +245,59 @@ In this example, the same quote is displayed in `200px` and `800px` wide contain
   >
   - Shannon L. Alder
 </blockquote>
+<p>Aspect ratio with overflow:</p>
+<blockquote>
+  <q
+    >When you stop living your life based on what others think of you real life
+    begins. At that moment, you will finally see the door of self acceptance
+    opened.</q
+  >
+  - Shannon L. Alder
+</blockquote>
+<p>
+  <label
+    ><input type="checkbox" checked /> toggle <code>overflow: auto;</code> and
+    <code>overflow: visible;</code></label
+  >
+</p>
 ```
 
 ```css hidden live-sample___alder
 blockquote {
   border: 3px dotted #ccc;
   padding: 0 3px;
-  width: 200px;
   margin: 20px 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+body:has(:checked) blockquote {
+  overflow: auto;
+}
+:checked + code,
+:not(:checked) + code + code {
+  outline: 1px solid green;
+}
+```
+
+```css live-sample___alder
+blockquote {
+  width: 200px;
+}
+blockquote:nth-of-type(2) {
+  width: 600px;
 }
-blockquote:last-of-type {
-  width: 800px;
+blockquote:nth-of-type(3) {
+  height: 200px;
 }
 ```
 
-{{EmbedLiveSample("alder", "100", "300")}}
+{{EmbedLiveSample("alder", "100", "800")}}
+
+To highlight the issue with setting an non-replaced element's aspect ratio via size dimensions, toggle the {{cssxref("overflow")}} property between `auto` and `visible`.
+
+While it's possible to define an aspect ratio on non-replaced elements by setting both dimensions and hiding overflowing content, the CSS {{cssxref("aspect-ratio")}} property provides explicit aspect ratio support. This means a specific aspect-ratio can be set even when you don't know how content or screen sizes.
 
-With CSS, we can also set an aspect ratio on non-replaced elements:
+In this example, we render square boxes, regardless of the width of the text, by setting `aspect ratio: 1` on {{htmlelement("blockquote")}}, a non-replaced element:
 
 ```html hidden live-sample___words
 <p>Short text:</p>
@@ -142,12 +313,10 @@ blockquote {
 }
 ```
 
-In this example, the blockquotes are as wide as they need to be to fit the content. The width effect was accomplished by setting the {{cssxref("inline-size")}} to {{cssxref("max-content")}}. The square effect was accomplished with the CSS {{cssxref("aspect-ratio")}} property. The value of `1` creates a square; the block direction is defined to be as tall as the element is wide, without the use of the {{cssxref("height")}} or {{cssxref("block-size")}} properties.
-
 ```css hidden live-sample___words
 blockquote {
-  border: 3px dotted #ccc;
-  padding: 0 3px;
+  border: 1px solid #ccc;
+  padding: 1px;
   margin: 20px 0;
   background-color: #ededed;
 }
@@ -155,13 +324,41 @@ blockquote {
 
 {{EmbedLiveSample("words", "100", "400")}}
 
-We've always been able to preserve a replaced element's aspect ratio. With the CSS {{cssxref("aspect-ratio")}} property, we can specify aspect ratios for both replaced and non-replaced elements.
+Each box has one dimension defined: the {{cssxref("inline-size")}}, which is the width in horizontal languages, is set to {{cssxref("max-content")}}, which sets the size to be as wide as it needs to be to fit the content without wrapping. The second dimension, in this case, the {{cssxref("block-size")}} or {{cssxref("height")}}, is set to be the same length as the first dimension. This is accomplished with the CSS {{cssxref("aspect-ratio")}} property. We defined the desired width-to-height ratio of the element's box to be `1`, which is the same a `1 / 1`, a square; setting the block direction to be as tall as the element is wide, without the use of the {{cssxref("height")}} or {{cssxref("block-size")}} properties.
+
+In these examples, a size was explicitly set on the element itself. When working with non-replaced elements, aspect ratio works when the size is not explicit.
+
+In this example, the container {{htmlelement("div")}} is `200px` wide. Both elements have a {{cssxref("border-radius")}} of `50%`. The container has padding and the {{htmlelement("p")}} has top and bottom margins by default, so the container is an oval while the child, with an `aspect-ratio` of `1` but no inline or block sizing explicitly defined, is a circle.
+
+```html live-sample___circle
+<div><p>Hello world</p></div>
+```
+
+```css live-sample___circle
+div,
+p {
+  border-radius: 50%;
+}
+div {
+  width: 200px;
+  padding: 5px;
+  background-color: #66ccff;
+}
+p {
+  aspect-ratio: 1;
+  text-align: center;
+  border: 10px solid #ffffff;
+  background-color: #f4aab9;
+}
+```
+
+{{EmbedLiveSample("circle", "100", "250")}}
 
 ## Common use cases
 
 ### Responsive external assets
 
-When embedding content from third party sites, such as videos from TikTok, Youtube, or Instagram, you want the content to be responsive. The code snippet you include on your website that includes these external videos generally creates and {{htmlelement("iframe")}} which includes the video.
+When embedding content from third-party sites, such as videos from TikTok, Youtube, or Instagram, you want the content to be responsive. The code snippet you include on your website that includes these external videos generally creates and {{htmlelement("iframe")}} which includes the video.
 
 While every {{htmlelement("video")}} element has the aspect ratio of its media file, we're including an `<iframe>`, not a `<video>`. We need the `<iframe>` to be responsive while always maintaining the aspect ratio of the video it contains. We may want to set the iframe's width to `100%` of its container or `100vw` to be as wide as the viewport regardless of the viewport's size. Setting a height might stretch or squash the video. Instead, we set the `aspect-ratio` of the video's container to be the same aspect ratio as the video. Problem solved!
 
@@ -177,9 +374,9 @@ The standard aspect ratio for YouTube on a computer is 16:9. For Tiktok and Inst
 }
 ```
 
-If we want the iframe and the video it contains to be as large as possible while being 100% visible and, of course, while maintaining the aspect ratio, we can use the `aspect-ratio` feature of the `@media` media query.
+We can use the `aspect-ratio` feature of the `@media` media query and the CSS `aspect-ratio` property to size the iframe and the video it contains so that it is always as large as possible - taking up either the full width or height of the viewports - no matter the size of the viewport, while maintaining a set aspect ratio.
 
-We set the landscape sized Youtube to be as wide as the viewport and both portrait-sized Titkok and Instagram to be as tall as the viewport. However, if a viewport's aspect ratio is wider than 16:9, Youtube is set to be only as tall as the viewport. If the viewport is narrower than 9:16, Instagram and Tiktok are set to be only as wide as the viewport.
+We set the landscape-oriented Youtube video to be as wide as the viewport and both portrait-oriented Titkok and Instagram video iframes to be as tall as the viewport. If a viewport's aspect ratio is wider than 16:9, we set the Youtube video to be the height of the viewport. If the viewport is narrower than 9:16, we set both Instagram and Tiktok videos to the width of the viewport.
 
 ```css
 .youtube {
@@ -194,12 +391,14 @@ We set the landscape sized Youtube to be as wide as the viewport and both portra
   width: auto;
 }
 
+/* if the viewort is very wide but not very tall */
 @media (aspect-ratio > 16 / 9) {
   .youtube {
     width: auto;
     height: 100vh;
   }
 }
+/* if the viewort is very tall but not very wide */
 @media (aspect-ratio < 9 / 16) {
   .instagram,
   .tiktok {
@@ -211,16 +410,16 @@ We set the landscape sized Youtube to be as wide as the viewport and both portra
 
 ### Grid of square cells
 
-A grid of square cells can be created by defining fixed column track sizes with each row being the same size as the column track. However, when creating responsive grids using `auto-fill` to fit as many column tracks as will fit in the container, we don't know what the width of each item, so we don't know what height to set to create square items.
+A grid of square cells can be created by defining fixed column track sizes with each row being the same size as the column track. However, when creating responsive grids using `auto-fill` to fit as many column tracks as will fit in the container, we don't know the width of each item, so we don't know what height to set to create square items.
 
 By setting an aspect ratio on the items, we can ensure when the grid items are laid out, each grid item will be as tall as it is wide, creating square grid items no matter the width or height.
 
-In this square grid item example, the grid tracks are auto-sized, taking their size from the items, with the height being sized by the `aspect-ratio` to be as tall as they are wide:
+In this square grid item example, the grid tracks are auto-sized, taking their size from the items. Each item will be at least 95px wide but could be much wider. No matter the width, each item will be a square, with the height being sized by the `aspect-ratio` to be as tall as it is wide:
 
 ```css
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
 }
 
 .item {
@@ -231,6 +430,7 @@ In this square grid item example, the grid tracks are auto-sized, taking their s
 ```css hidden
 div {
   gap: 20px;
+  font-size: 1.1;
 }
 
 div div {
@@ -238,20 +438,28 @@ div div {
   aspect-ratio: 1;
   counter-increment: items;
 }
-div div:after {
+div div::after {
   content: counter(items);
 }
+.item::after {
+  /*  hide the number if there's content  */
+  position: absolute;
+  color: transparent;
+}
 ```
 
 ```html hidden
 <div class="grid">
   <div></div>
   <div></div>
+  <div class="item">
+    This text would overflow the parent, but we've set properties to prevent it
+    from doing so.
+  </div>
   <div></div>
   <div></div>
   <div></div>
-  <div></div>
-  <div></div>
+  <div class="item"><img src="flag.jpg" alt="Pride flag" /></div>
   <div></div>
   <div></div>
   <div></div>
@@ -262,3 +470,21 @@ div div:after {
   <div></div>
 </div>
 ```
+
+For the content of a grid item to not grow beyond the preferred height set by the `aspect-ratio`, set the {{cssxref("min-height")}} to `0` and the {{cssxref("overflow")}} to a value other than `visible`. This will work for intrinsically sized content. If you have content that is intrinsically larger than the available space, set that content to not be larger than the grid item by setting the {{cssxref("max-height")}} ( or {{cssxref("max-width")}}, depending on the content) to `100%`.
+
+```css
+.item {
+  min-height: 0;
+  overflow: auto;
+}
+.item > * {
+  max-height: 100%;
+}
+```
+
+{{EmbedLiveSample("grid of square cells", "100", "350")}}
+
+## See also
+
+- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module

From 7a969e52e5ee666ceb1337e7ea040d043d381ee9 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Tue, 7 May 2024 00:15:44 -0700
Subject: [PATCH 05/16] borked repo

---
 .../understanding_aspect-ratio/flag.jpg       | Bin 8350 -> 0 bytes
 .../understanding_aspect-ratio/index.md       | 490 ------------------
 2 files changed, 490 deletions(-)
 delete mode 100644 files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/flag.jpg
 delete mode 100644 files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md

diff --git a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/flag.jpg b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/flag.jpg
deleted file mode 100644
index d4a97c5c8bc250296c87224f02a4a0204b57271f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 8350
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
DPK9I}

diff --git a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
deleted file mode 100644
index 559e449e205ea59..000000000000000
--- a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
+++ /dev/null
@@ -1,490 +0,0 @@
----
-title: Understanding aspect-ratio
-slug: Web/CSS/CSS_box_sizing/Understanding_aspect-ratio
-page-type: guide
-spec-urls: https://drafts.csswg.org/css-sizing/#aspect-ratio
----
-
-{{CSSRef}}
-
-When developing responsive sites, you often want to be able to set the inline-direction size to a percentage and have the block-direction change size proportionally, maintaining a specific aspect ratio. When it comes to images and video, maintaining these replaced elements' aspect ratio is not only necessary for {{glossary("responsive web design")}}, but it's a vital component of good user experience by preventing cumulative {{domxref("LayoutShift", "layout shift")}}.
-
-With CSS, we can size replaced and non-replaced elements based on their aspect ratio. In this guide, we discuss controlling aspect ratio with CSS for design aesthetics and to improve user experience and page loading performance.
-
-In this guide, we learn about the `aspect-ratio` property, discuss aspect ratios for replaced and non-replaced elements, and then examine some common aspect ratio use cases.
-
-### CSS `aspect-ratio` property
-
-The CSS {{cssxref("aspect-ratio")}} property value defines the preferred width-to-height ratio of an element's box. The value is either a {{cssxref("ratio")}}, the keyword `auto`, or a space-separated combination of both.
-
-The `<ratio>` is the ratio of the width and height, in that order. It is represented by two positive {{cssxref("number")}} values separated by a forward slash (`/`) or a single `<number>`. When a single number is used, it is the same as writing the ratio as `<number> / 1`, which is also the width divided by the height.
-
-The following values are all equivalent:
-
-```css
-aspect-ratio: 3 / 6;
-aspect-ratio: 1 / 2;
-aspect-ratio: 0.5 / 1;
-aspect-ratio: 0.5;
-```
-
-The following values are also all equivalent:
-
-```css
-aspect-ratio: 9/6;
-aspect-ratio: 3/2;
-aspect-ratio: 1.5;
-```
-
-```html hidden live-sample___number
-<div>0.5</div>
-<div>1.5</div>
-```
-
-```css hidden live-sample___number
-div {
-  height: 121px;
-  aspect-ratio: 0.5;
-  background-color: pink;
-  line-height: 100px;
-  text-align: center;
-  float: left;
-  background-image: repeating-linear-gradient(
-      to right,
-      black 0px 1px,
-      transparent 1px 20px
-    ), repeating-linear-gradient(black 0px 1px, transparent 1px 20px);
-  background-size:
-    181px 5px,
-    5px 121px;
-  background-repeat: no-repeat;
-}
-div + div {
-  aspect-ratio: 1.5;
-  background-color: lightgreen;
-  margin-left: 10px;
-}
-```
-
-{{EmbedLiveSample("number", "100", "130")}}
-
-The effect of the `auto` keyword depends on whether the element on which it is applied is a replaced element or not. For replaced elements with an intrinsic aspect ratio, `auto` means the intrinsic aspect ratio should be used. In all other instances, the `auto` value means the box has no preferred aspect ratio. In both cases, this is the default behavior as if no `aspect-ratio` property were applied.
-
-When the value contains both the `auto` keyword and a `<ratio>` value, such as `aspect-ratio: auto 2 / 3;` or `aspect-ratio: 0.75 auto;`, the `auto` value is applied to replaced elements with a natural aspect ratio and the specified ratio of the `width` / `height` or `<number>` is used as the preferred aspect ratio.
-
-You will have noticed the word "preferred" in the definitions above. The `aspect-ratio` value is not always applied when set. The `aspect-ratio` property sets a "preferred" aspect ratio, so only ever has an effect if at least one of the box's sizes is automatic.
-
-When both the height and width or inline and block sizes are explicitly set, the `aspect-ratio` property value is ignored. In this case, there is no dimension that is allowed to be automatically sized - the preferred sizes are explicitly set - so the `aspect-ratio` property has no effect. When you declare both the inline and block dimensions, those take precedence.
-
-With replaced elements, if you don't explicitly set a value (other than `auto`) to either dimension, both will default to their intrinsic size (any `aspect-ratio` value isn't applied). The `aspect-ratio` will apply to non-replaced elements that don't have a dimension explicitly set, as non-replaced elements are either [intrinsically](/en-US/docs/Glossary/Intrinsic_Size) or [extrinsically](/en-US/docs/Glossary/Intrinsic_Size#extrinsic_sizing) sized, getting their size from their content, container, [box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model)properties, etc.
-
-## Understanding aspect ratio
-
-When an element is rendered to the page, if no CSS is applied and no HTML sizing attributes are included, the user agent will render the object at its natural size.
-
-Every element rendered to the page has a height and a width, and, therefore, an {{glossary("aspect ratio")}}, which is the ratio between the width and height. These natural dimensions, the size of the media object without any sizing, scaling, zooming, or borders applied, is its natural or {{glossary("intrinsic size")}}. An element's intrinsic size is determined by the element itself, not by any formatting ([box sizing](/en-US/docs/Web/CSS/CSS_box_sizing), border, margin, padding, etc.) applied.
-
-### Replaced elements
-
-Replaced elements like {{htmlelement("img")}} and {{htmlelement("video")}} are replaced with media that have set dimensions and, therefore, an intrinsic aspect ratio. Consider a raster image, such as a JPEG, PNG, or GIF. If you place an image on a page and do not set a height or width, either via {{htmlelement("img")}} attributes or with CSS, it will be displayed at its intrinsic size.
-
-```html hidden live-sample___original
-<img src="flag.jpg" alt="Pride flag" />
-```
-
-{{EmbedLiveSample("original", "100", "230")}}
-
-This is a 220px square image with no CSS applied; it is displayed at its intrinsic or default size.
-
-If replaced content is auto-sized or you provide a size for only one dimension, such as the width, the browser will automatically resize the other dimension, in this case, the height, maintaining the media's original aspect ratio.
-
-In this example, a single dimension is set on the image, so the user agent preserves its aspect ratio. The image is displayed at `width: 55px`, `width: 110px`, and at its natural [`width: auto`](/en-US/docs/Web/CSS/width) size of `220px`.
-
-```html hidden live-sample___image
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
-```
-
-```css hidden live-sample___image
-img {
-  width: 55px;
-  margin-right: 5px;
-}
-img + img {
-  width: 110px;
-}
-img + img + img {
-  width: auto;
-}
-```
-
-{{EmbedLiveSample("image", "100", "230")}}
-
-Only when you provide sizes for both dimensions is there a risk of distorting the replaced element. For example, setting `width: 100vw; height: 100vh;` on an image creates a variable aspect ratio; the image will appear either stretched or squashed when the viewport's aspect ratio differs from the image's natural aspect ratio.
-
-In this example, the same image is repeated three times, explicitly sized with the same {{cssxref("height")}} value (`110px`) but different {{cssxref("width")}} values (`55px`, `110px`, and `220px`):
-
-```html hidden live-sample___imagebad
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
-```
-
-```css hidden live-sample___imagebad
-img {
-  width: 55px;
-  height: 110px;
-}
-img + img {
-  width: 110px;
-}
-img + img + img {
-  width: 220px;
-}
-```
-
-{{EmbedLiveSample("imagebad", "100", "120")}}
-
-In this example, we used `height` and `width` to distort the image. We squashed the first one and stretched the third.
-
-We could have created this same distorted effect using the CSS {{cssxref("aspect-ratio")}} property, by setting a single dimension (not both or neither) and providing a value other than `1` (or `1 / 1`). You likely don't want to do this, but it's good to know that it's possible.
-
-```html hidden live-sample___stretch
-<img src="flag.jpg" alt="Pride flag" />
-```
-
-```css live-sample___stretch
-img {
-  height: 100vh;
-  aspect-ratio: 3;
-}
-```
-
-{{EmbedLiveSample("stretch", "100", "230")}}
-
-Here we declared a single dimension (in this case, `100vh` is the full height of the example {{htmlement("iframe")}} viewport). For `aspect-ratio` to apply to replaced elements, one dimension must be set. Setting both or neither doesn't work.
-
-To fit a replaced element to the content of its container while maintaining its intrinsic aspect ratio, set the {{cssxref("object-fit")}} property set to `cover` or `contain`. This will resize the replaced element and either clip it to "cover" the container or display it at a smaller size fully "contained" within it.
-
-In this example, we're placing our square image into a grid of three items with an aspect ratio of `5 / 2`.
-
-We include a container with three items, each with one image:
-
-```html live-sample___imagegrid
-<div class="grid">
-  <div>
-    <img src="flag.jpg" alt="Pride flag" />
-  </div>
-  <div>
-    <img class="cover" src="flag.jpg" alt="Pride flag" />
-  </div>
-  <div>
-    <img class="contain" src="flag.jpg" alt="Pride flag" />
-  </div>
-</div>
-```
-
-We create a grid with each item having an aspect ratio of 2.5 with a minimum width of `150px`, and therefore a minimum height of 60px, but the final width and height will be determined by the width of the example's iframe, which is based on your viewport size:
-
-```css live-sample___imagegrid
-.grid {
-  display: grid;
-  gap: 20px;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  font-size: 0; /* to minimize whitespace */
-}
-
-div div {
-  aspect-ratio: 5 / 2;
-  background-color: #ccc;
-}
-```
-
-We then size the images and set the `object-fit` property on the last two images:
-
-```css live-sample___imagegrid
-img {
-  height: 100%;
-  width: 100%;
-}
-.cover {
-  object-fit: cover;
-}
-.contain {
-  object-fit: contain;
-}
-```
-
-{{EmbedLiveSample("imagegrid", "100", "100")}}
-
-Only the first image is distorted (stretched). We could have used the `fill` value of `object-fit` to create the same effect. The `cover` image is the full width of the container, centered vertically, and clipped to fit in the container. The `contain` value is contained; shrunk to fit and centered horizontally.
-
-### Non-replaced elements
-
-While the aspect ratio of a replaced element is maintained by default, when the intrinsic size of a non-replaced element is changed the aspect ratio usually changes. For example, identical content may be three lines on a widescreen or in a wide parent container and eight lines on a narrow screen or container.
-
-In this example, the same quote is displayed in `200px` and `600px` wide containers, and a square set with a height matching its `200px` width:
-
-```html hidden live-sample___alder
-<p>Narrow:</p>
-<blockquote>
-  <q
-    >When you stop living your life based on what others think of you real life
-    begins. At that moment, you will finally see the door of self acceptance
-    opened.</q
-  >
-  - Shannon L. Alder
-</blockquote>
-<p>Wide:</p>
-<blockquote>
-  <q
-    >When you stop living your life based on what others think of you real life
-    begins. At that moment, you will finally see the door of self acceptance
-    opened.</q
-  >
-  - Shannon L. Alder
-</blockquote>
-<p>Aspect ratio with overflow:</p>
-<blockquote>
-  <q
-    >When you stop living your life based on what others think of you real life
-    begins. At that moment, you will finally see the door of self acceptance
-    opened.</q
-  >
-  - Shannon L. Alder
-</blockquote>
-<p>
-  <label
-    ><input type="checkbox" checked /> toggle <code>overflow: auto;</code> and
-    <code>overflow: visible;</code></label
-  >
-</p>
-```
-
-```css hidden live-sample___alder
-blockquote {
-  border: 3px dotted #ccc;
-  padding: 0 3px;
-  margin: 20px 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-body:has(:checked) blockquote {
-  overflow: auto;
-}
-:checked + code,
-:not(:checked) + code + code {
-  outline: 1px solid green;
-}
-```
-
-```css live-sample___alder
-blockquote {
-  width: 200px;
-}
-blockquote:nth-of-type(2) {
-  width: 600px;
-}
-blockquote:nth-of-type(3) {
-  height: 200px;
-}
-```
-
-{{EmbedLiveSample("alder", "100", "800")}}
-
-To highlight the issue with setting an non-replaced element's aspect ratio via size dimensions, toggle the {{cssxref("overflow")}} property between `auto` and `visible`.
-
-While it's possible to define an aspect ratio on non-replaced elements by setting both dimensions and hiding overflowing content, the CSS {{cssxref("aspect-ratio")}} property provides explicit aspect ratio support. This means a specific aspect-ratio can be set even when you don't know how content or screen sizes.
-
-In this example, we render square boxes, regardless of the width of the text, by setting `aspect ratio: 1` on {{htmlelement("blockquote")}}, a non-replaced element:
-
-```html hidden live-sample___words
-<p>Short text:</p>
-<blockquote>Breath.</blockquote>
-<p>longer text:</p>
-<blockquote>You're perfect just as you are.</blockquote>
-```
-
-```css live-sample___words
-blockquote {
-  inline-size: max-content;
-  aspect-ratio: 1;
-}
-```
-
-```css hidden live-sample___words
-blockquote {
-  border: 1px solid #ccc;
-  padding: 1px;
-  margin: 20px 0;
-  background-color: #ededed;
-}
-```
-
-{{EmbedLiveSample("words", "100", "400")}}
-
-Each box has one dimension defined: the {{cssxref("inline-size")}}, which is the width in horizontal languages, is set to {{cssxref("max-content")}}, which sets the size to be as wide as it needs to be to fit the content without wrapping. The second dimension, in this case, the {{cssxref("block-size")}} or {{cssxref("height")}}, is set to be the same length as the first dimension. This is accomplished with the CSS {{cssxref("aspect-ratio")}} property. We defined the desired width-to-height ratio of the element's box to be `1`, which is the same a `1 / 1`, a square; setting the block direction to be as tall as the element is wide, without the use of the {{cssxref("height")}} or {{cssxref("block-size")}} properties.
-
-In these examples, a size was explicitly set on the element itself. When working with non-replaced elements, aspect ratio works when the size is not explicit.
-
-In this example, the container {{htmlelement("div")}} is `200px` wide. Both elements have a {{cssxref("border-radius")}} of `50%`. The container has padding and the {{htmlelement("p")}} has top and bottom margins by default, so the container is an oval while the child, with an `aspect-ratio` of `1` but no inline or block sizing explicitly defined, is a circle.
-
-```html live-sample___circle
-<div><p>Hello world</p></div>
-```
-
-```css live-sample___circle
-div,
-p {
-  border-radius: 50%;
-}
-div {
-  width: 200px;
-  padding: 5px;
-  background-color: #66ccff;
-}
-p {
-  aspect-ratio: 1;
-  text-align: center;
-  border: 10px solid #ffffff;
-  background-color: #f4aab9;
-}
-```
-
-{{EmbedLiveSample("circle", "100", "250")}}
-
-## Common use cases
-
-### Responsive external assets
-
-When embedding content from third-party sites, such as videos from TikTok, Youtube, or Instagram, you want the content to be responsive. The code snippet you include on your website that includes these external videos generally creates and {{htmlelement("iframe")}} which includes the video.
-
-While every {{htmlelement("video")}} element has the aspect ratio of its media file, we're including an `<iframe>`, not a `<video>`. We need the `<iframe>` to be responsive while always maintaining the aspect ratio of the video it contains. We may want to set the iframe's width to `100%` of its container or `100vw` to be as wide as the viewport regardless of the viewport's size. Setting a height might stretch or squash the video. Instead, we set the `aspect-ratio` of the video's container to be the same aspect ratio as the video. Problem solved!
-
-The standard aspect ratio for YouTube on a computer is 16:9. For Tiktok and Instagram, it's 9:16.
-
-```css
-.youtube {
-  aspect-ratio: 16/9;
-}
-.instagram,
-.tiktok {
-  aspect-ratio: 9/16;
-}
-```
-
-We can use the `aspect-ratio` feature of the `@media` media query and the CSS `aspect-ratio` property to size the iframe and the video it contains so that it is always as large as possible - taking up either the full width or height of the viewports - no matter the size of the viewport, while maintaining a set aspect ratio.
-
-We set the landscape-oriented Youtube video to be as wide as the viewport and both portrait-oriented Titkok and Instagram video iframes to be as tall as the viewport. If a viewport's aspect ratio is wider than 16:9, we set the Youtube video to be the height of the viewport. If the viewport is narrower than 9:16, we set both Instagram and Tiktok videos to the width of the viewport.
-
-```css
-.youtube {
-  aspect-ratio: 16/9;
-  width: 100vw;
-  height: auto;
-}
-.instagram,
-.tiktok {
-  aspect-ratio: 9/16;
-  height: 100vh;
-  width: auto;
-}
-
-/* if the viewort is very wide but not very tall */
-@media (aspect-ratio > 16 / 9) {
-  .youtube {
-    width: auto;
-    height: 100vh;
-  }
-}
-/* if the viewort is very tall but not very wide */
-@media (aspect-ratio < 9 / 16) {
-  .instagram,
-  .tiktok {
-    height: auto;
-    width: 100vw;
-  }
-}
-```
-
-### Grid of square cells
-
-A grid of square cells can be created by defining fixed column track sizes with each row being the same size as the column track. However, when creating responsive grids using `auto-fill` to fit as many column tracks as will fit in the container, we don't know the width of each item, so we don't know what height to set to create square items.
-
-By setting an aspect ratio on the items, we can ensure when the grid items are laid out, each grid item will be as tall as it is wide, creating square grid items no matter the width or height.
-
-In this square grid item example, the grid tracks are auto-sized, taking their size from the items. Each item will be at least 95px wide but could be much wider. No matter the width, each item will be a square, with the height being sized by the `aspect-ratio` to be as tall as it is wide:
-
-```css
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
-}
-
-.item {
-  aspect-ratio: 1;
-}
-```
-
-```css hidden
-div {
-  gap: 20px;
-  font-size: 1.1;
-}
-
-div div {
-  background-color: #ccc;
-  aspect-ratio: 1;
-  counter-increment: items;
-}
-div div::after {
-  content: counter(items);
-}
-.item::after {
-  /*  hide the number if there's content  */
-  position: absolute;
-  color: transparent;
-}
-```
-
-```html hidden
-<div class="grid">
-  <div></div>
-  <div></div>
-  <div class="item">
-    This text would overflow the parent, but we've set properties to prevent it
-    from doing so.
-  </div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div class="item"><img src="flag.jpg" alt="Pride flag" /></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
-```
-
-For the content of a grid item to not grow beyond the preferred height set by the `aspect-ratio`, set the {{cssxref("min-height")}} to `0` and the {{cssxref("overflow")}} to a value other than `visible`. This will work for intrinsically sized content. If you have content that is intrinsically larger than the available space, set that content to not be larger than the grid item by setting the {{cssxref("max-height")}} ( or {{cssxref("max-width")}}, depending on the content) to `100%`.
-
-```css
-.item {
-  min-height: 0;
-  overflow: auto;
-}
-.item > * {
-  max-height: 100%;
-}
-```
-
-{{EmbedLiveSample("grid of square cells", "100", "350")}}
-
-## See also
-
-- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module

From 750bfd9070f92f01c2a2e76c38a90bb337d58f56 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Tue, 28 May 2024 10:48:29 -0700
Subject: [PATCH 06/16] Draft: shapes module landing page

---
 files/en-us/web/css/css_shapes/index.md | 82 ++++++++++++++++++++++---
 1 file changed, 72 insertions(+), 10 deletions(-)

diff --git a/files/en-us/web/css/css_shapes/index.md b/files/en-us/web/css/css_shapes/index.md
index 951ef20b2c36382..68fc3fb1f88966d 100644
--- a/files/en-us/web/css/css_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/index.md
@@ -2,14 +2,20 @@
 title: CSS shapes
 slug: Web/CSS/CSS_shapes
 page-type: css-module
-spec-urls: https://drafts.csswg.org/css-shapes/
+spec-urls:
+ - https://drafts.csswg.org/css-shapes-1/
+ - https://drafts.csswg.org/css-shapes-2/
 ---
 
 {{CSSRef}}
 
-The **CSS shapes** module describes geometric shapes that can be in CSS. For the [Level 1 specification](https://drafts.csswg.org/css-shapes/), CSS shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box.
+The **CSS shapes** module describes geometric shapes that can be used in CSS and defines properties that make use of shapes to control the geometry of an element’s float area, to apply to exclusions, and to apply to an element’s content area. 
 
-## Basic example
+The specification defines several ways to define shapes. Shapes enable wrapping content around a shape rather than following the rectangle of the element's box. Shapes can also be used to wrap content within the element.
+
+Shapes define geometries that can be used as CSS values. This module provides functions for creating ellipses, polygons, and arbitrary geometries. Other CSS modules can make use of shapes defined in this specification, including [CSS motion path](/en-US/docs/Web/CSS/CSS_motion_path) and [CSS masking](/en-US/docs/Web/CSS/CSS_masking).
+
+## CSS shapes in action
 
 The example below shows an image that has been floated left, and the `shape-outside` property applied with a value of `circle(50%)`. This creates a circle shape, and the content wrapping the float now wraps around that shape. This changes the length of the wrapping text's line boxes.
 
@@ -20,20 +26,78 @@ The example below shows an image that has been floated left, and the `shape-outs
 ### Properties
 
 - {{cssxref("shape-image-threshold")}}
+- {{cssxref("shape-inside")}}
 - {{cssxref("shape-margin")}}
 - {{cssxref("shape-outside")}}
+- {{cssxref("shape-padding")}}
 
 ### Data types
 
 - {{cssxref("&lt;basic-shape&gt;")}}
 
+### Functions
+
+- {{cssxref("basic-shape/circle","circle()")}}
+- {{cssxref("basic-shape/ellipse","ellipse()")}}
+- {{cssxref("basic-shape/inset","inset()")}}
+- {{cssxref("basic-shape/path","path()")}}
+- {{cssxref("basic-shape/polygon","polygon()")}}
+- {{cssxref("basic-shape/rect","rect()")}}
+- {{cssxref("basic-shape/shape","shape()")}}
+- {{cssxref("basic-shape/xywh","xywh()")}}
+
+### Terms
+
+- [Reference box]()
+
 ## Guides
 
 - [Overview of shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes)
+
+    - : Defining basic shapes with the `shape-margin` and  `clip-path` properties, and debugging basic shapes with 
+Developer Tools
+
 - [Shapes from box values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values)
+
+    - : Using `border-radius` curvatures and CSS box model values to create shapes
+
 - [Basic shapes](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes)
+ 
+    - : something
+
 - [Shapes from images](/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images)
 
+    - : something
+
+## Related concepts
+
+- [CSS motion path](/en-US/docs/Web/CSS/CSS_motion_path) module
+
+    - {{cssxref("offset")}}
+    - {{cssxref("offset-anchor")}}
+    - {{cssxref("offset-distance")}}
+    - {{cssxref("offset-path")}}
+    - {{cssxref("offset-position")}}
+    - {{cssxref("offset-rotate")}}
+    - {{cssxref("ray")}} function
+
+- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
+
+    - {{cssxref("clip")}}
+    - {{cssxref("clip-path")}}
+    - {{cssxref("clip-rule")}}
+    - {{cssxref("mask")}}
+    - {{cssxref("mask-origin")}}
+    - {{cssxref("mask-position")}}
+
+- [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders) module
+
+    - {{cssxref("border-radius")}} shorthand
+
+- [CSS box model](/en-US/docs/Web/CSS/CSS_Box_Model) module
+
+    - {{cssxref("box-edge")}} data type
+
 ## Specifications
 
 {{Specifications}}
@@ -41,10 +105,8 @@ The example below shows an image that has been floated left, and the `shape-outs
 ## See also
 
 - [CSS Shapes resources](https://codepen.io/KristopherVanSant/post/css-shapes-resources)
-- [CSS Shapes 101](https://alistapart.com/article/css-shapes-101/)
-- [Creating non-rectangular layouts with CSS Shapes](https://www.sarasoueidan.com/blog/css-shapes/)
-- [How to use CSS Shapes in your web design](https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498)
-- [How to get started with CSS Shapes](https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/)
-- [What I learned in one weekend with CSS Shapes](https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5)
-- [CSS vs. SVG: Shapes and arbitrarily-shaped UI components](https://blog.adobe.com/en/publish/2015/09/01/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components)
-- [Edit shape paths in CSS — Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)
+- [CSS Shapes 101](https://alistapart.com/article/css-shapes-101/) via alistapart.com (2014)
+- [Creating non-rectangular layouts with CSS Shapes](https://www.sarasoueidan.com/blog/css-shapes/) via sarasoueidan.com (2013)
+- [How to use CSS Shapes in your web design](https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498) via tutsplus.com (2016)
+- [How to get started with CSS Shapes](https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/) via webdesignerdepot.com (2015)
+- [Edit CSS shapes with the shape path editor](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html) via mozilla.org (2018) ([Video](https://www.youtube.com/watch?v=u9bDe3Bw0sA))

From 436b95c743ff7879b48457d54ca7526e7f78c64c Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Tue, 28 May 2024 16:46:30 -0700
Subject: [PATCH 07/16] edit basic shape guide

---
 .../web/css/css_shapes/basic_shapes/index.md  | 75 ++++++++++---------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/files/en-us/web/css/css_shapes/basic_shapes/index.md b/files/en-us/web/css/css_shapes/basic_shapes/index.md
index 5326b0c1193323f..d3cad8b3a4dff5f 100644
--- a/files/en-us/web/css/css_shapes/basic_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/basic_shapes/index.md
@@ -1,12 +1,12 @@
 ---
-title: Basic shapes
+title: Basic shapes with shape-outside
 slug: Web/CSS/CSS_shapes/Basic_shapes
 page-type: guide
 ---
 
 {{CSSRef}}
 
-CSS Shapes can be defined using the {{cssxref("&lt;basic-shape&gt;")}} type, and in this guide I'll explain how each of the different values accepted by this type work. They range from simple circles to complex polygons.
+CSS Shapes can be defined using the {{cssxref("&lt;basic-shape&gt;")}} type. In this guide, we discuss creating rectangles, circles, ellipses and polygons with the {{cssxref("shape-outside")}} property, part of features defined in the [CSS shapes module](/en-US/docs/Web/CSS/CSS_shapes).
 
 Before looking at shapes, it is worth understanding two pieces of information that go together to make these shapes possible:
 
@@ -15,27 +15,30 @@ Before looking at shapes, it is worth understanding two pieces of information th
 
 ## The \<basic-shape> type
 
-The `<basic-shape>` type is used as the value for all of our basic shapes. This type uses Functional Notation: the type of shape is followed by parenthese, inside of which are additional values used to describe the shape.
+The [`<basic-shape>`](/en-US/docs/Web/CSS/basic-shape) type is used as the value for all of our basic shapes. This type is a functional notation: the type of shape is followed by parentheses, inside of which are additional values used to describe the shape.
 
-The arguments which are accepted vary depending on the shape that you are creating. We will cover these in the examples below.
+The arguments that are accepted vary depending on the shape that you are creating. We will cover these in the examples below.
 
 ## The reference box
 
-Understanding the reference box used by CSS Shapes is important when using basic shapes, as it defines each shape's coordinate system. You have already met the reference box in [the guide on creating shapes from Box Values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values), which directly uses the reference box to create the shape.
+Understanding the reference box used by CSS shapes is important when using basic shapes, as it defines each shape's coordinate system. You have already met the reference box in [the guide on creating shapes from box values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values), which directly uses the reference box to create the shape.
 
-The Firefox Shapes Inspector helpfully shows the reference box in use when you inspect a shape. In the screenshot below I have created a circle, using `shape-outside: circle(50%)`. The floated element has 20 pixels of padding, border and margin applied, and the Shapes Inspector highlights these reference boxes. When using a basic shape, the reference box used by default is the margin-box. You can see in the screenshot that the shape is being defined with reference to that part of the Box Model.
+The screenshot below is of the Firefox Shapes Inspector showing the reference box in use when you inspect a circle created using `shape-outside: circle(50%)`. The element has 20 pixels of padding, border and margin applied. The Shapes Inspector highlights these reference boxes.
 
-![An imaged clipped into a circle floated left, with a paragraph of text. The left edge of the text is circular abutting the clipped shape on the outside of the margin with the margin following the shape clipping.](shapes-reference-box.png)
+![Text wrapping around a circle floated left. The left edge of the text is circular abutting the clipped shape on the outside of the margin with the margin following the shape clipping.](shapes-reference-box.png)
 
-You can add the various box values after your basic shape definition. Therefore the default behavior is as if you have defined.
+When using a basic shape, the reference box used by default is the `margin-box`. You can see in the screenshot that the shape is being defined with reference to that part of the Box Model.
+
+While the default reference box is `margin-box`, this can be controlled. To set a different box as the reference box, include the box values after your basic shape definition.
+
+These two declarations are the same:
 
 ```css
-.shape {
-  shape-outside: circle(50%) margin-box;
-}
+shape-outside: circle(50%);
+shape-outside: circle(50%) margin-box;
 ```
 
-You can therefore change this in order that your shape uses the different parts of the box model, for example to use the border.
+For your shape to use a different reference box, include a different {{cssxref("box-edge")}} value, for example, to use the border as a reference box for our circle, set:
 
 ```css
 .shape {
@@ -43,15 +46,15 @@ You can therefore change this in order that your shape uses the different parts
 }
 ```
 
-What is worth noting is that the `margin-box` will clip the shape, therefore shapes created in reference to other shapes which extend past the margin box will have the shape clipped to the margin box. We will see this in the following examples of basic shapes.
+The `margin-box` will clip the shape. This means that shapes created in reference to other shapes that extend past the margin box will have the shape clipped to the margin box. This is demonstrated following basic shapes examples.
 
-For an excellent description of references boxes as they apply to CSS Shapes, see [Understanding Reference Boxes for CSS Shapes](http://razvancaliman.com/writing/css-shapes-reference-boxes/).
+For a more extensive explanation of references boxes as they apply to CSS Shapes, see [Understanding reference boxes for CSS shapes](http://razvancaliman.com/writing/css-shapes-reference-boxes/).
 
 ## inset()
 
-The `inset()` type defines a rectangle, which may not seem very useful as floating an item will give you a rectangular shape around it. However the `inset()` types enables the definition of offsets, thus pulling the content in over the shape.
+The [`inset()`](/en-US/docs/Web/CSS/basic-shape/inset) function defines a rectangle. This may not seem very useful as floating an item, without shapes, will give you a rectangular shape around it. However, the `inset()` type enables the definition of offsets, thus pulling the content in over the shape.
 
-Therefore `inset()` takes four values for the top, right, bottom and left values plus a final value for `border-radius`. The below CSS creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels.
+The `inset()` function takes up to four offset values for the offsets from side, plus an optional `round` keyword followed by a {{cssxref("border-radius")}} value. The below CSS creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels.
 
 ```css
 .shape {
@@ -60,7 +63,7 @@ Therefore `inset()` takes four values for the top, right, bottom and left values
 }
 ```
 
-Using the same rules as we use for the margin shorthand, you can set more than one offset at once. If there is only one value, it applies to all sides. If there are two values, the top and bottom offsets are set to the first value and the right and left offsets are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. So, the above rules could also be described as:
+The offset values use the same rules as we use for the {{cssxref("margin")}} shorthand. Four space-separated values define the top, right, bottom, and left offsets, in that order. You can also set more than one offset at once. If there is only one value, it applies to all sides. If there are two values, the top and bottom offsets are set to the first value and the right and left offsets are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. So, the above rules could also be described as:
 
 ```css
 .shape {
@@ -73,37 +76,35 @@ In the example below we have an `inset()` shape used to pull content over the fl
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}
 
-You can also add the Box Value that you wish to use as a reference box. In the example below change the reference box from `margin-box` to `border-box`, `padding-box` or `content-box` to see how the reference box used as the starting point before offsets are calculated changes.
+You can also add the box value that you wish to use as a reference box. In the example below change the reference box from `margin-box` to `border-box`, `padding-box` or `content-box` to see how the reference box is used as the starting point before offsets are calculated changes.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}
 
-## circle()
-
-The `circle()` value for `shape-outside` can accept two possible arguments. The first is the `shape-radius`.
+You can also create rectangles based on distances from the top and left edges of the reference box with the [`rect()`](/en-US/docs/Web/CSS/basic-shape/rect) function, or by width and height with the [`xywh()`](/en-US/docs/Web/CSS/basic-shape/xywh) function; both of these also support optional rounded corners.
 
-Both `circle()` and `ellipse()` values for `shape-outside` are specified as accepting this argument of `<shape-radius>`. This argument can be a length or percentage but can also be one of the keywords `closest-side` or `farthest-side`.
+## circle()
 
-The keyword **`closest-side`** uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.
+The [`circle()`](/en-US/docs/Web/CSS/basic-shape/circle) value for `shape-outside` can accept two possible arguments. The first is the `shape-radius`.
 
-The keyword **`farthest-side`** uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.
+Both `circle()` and `ellipse()` values for `shape-outside` are specified as accepting this argument of [`<shape-radius>`](/en-US/docs/Web/CSS/basic-shape#shape-radius). This argument can be a {{cssxref("length")}} or {{cssxref("percentage")}}, but can also be one of the keywords `closest-side` or `farthest-side`.
 
-The second argument is a `position`. If omitted this will be set to `center`. However you can use any valid position here to indicate the position of the center of the circle.
+The `closest-side` keyword value uses the length from the center of the shape to the closest side of the reference box to create the radius length. The `farthest-side` keyword value uses the length from the center of the shape to the farthest side of the reference box.
 
-Our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword **at** followed by a position value.
+The second argument is a `position`, which accepts a one- or two-value [`<position>`](/en-US/docs/Web/CSS/position_value), specified the same way as {{cssxref("background-position")}}, to indicate the position of the center of the circle. If one or both values are omitted, the values default to `center`.
 
-In the below example I have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. This gives a total width for the reference box of 140 pixels. I have given a value of 50% for the shape-radius value which means that our radius is 70px. I have then set the position value to 30%.
+To create a circle, we include a single radius value, optionally followed by the keyword **at** followed by a position value. This example has a circle applied to a square item with a width and height of `210px`, plus a margin of `20px`. This gives a total width for the reference box of `250px`. The `50%` value for the `<shape-radius>` means the radius is `125px`. The position value is set to `30%`, which is `30%` from the left and at the default vertical `center`.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}
 
-In the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for `inset()`.
+Play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for `inset()`.
 
-As an additional example, if you use the keywords `top left` for position, you can make a quarter circle shape in the top left corner of the page. The example below uses generated content to create a quarter circle shape for text to flow around.
+As an additional example, use the keywords `top left` for position to make a quarter circle shape in the top left corner of the page. The example below uses generated content to create a quarter-circle shape for text to flow around.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}
 
 ### The shape will be clipped by the margin box
 
-When describing Reference Boxes I explained that the margin-box will clip the shape. You can see this by moving the center of our circle towards the content by setting the position to 60%. The center of the circle is now nearer the content and the circle extends past the margin-box. This means that the extension becomes clipped and squared off.
+As noted in [reference boxes](#the-reference-box) above, the `margin-box` will clip the shape. You can see this by moving the center of our circle towards the content by setting the position to `60%`. The center of the circle will be nearer to the content and the circle will extend past the margin-box. This means that the extension becomes clipped and squared off.
 
 ```css
 img {
@@ -116,25 +117,27 @@ img {
 
 ## ellipse()
 
-An ellipse is essentially a squashed circle and so `ellipse()` acts in a very similar way to `circle()` except that we have to specify two radii x and y in that order.
+An ellipse is essentially a squashed circle. As such, the [`ellipse()`](/en-US/docs/Web/CSS/basic-shape/ellipse) function acts in a very similar way to `circle()`, except that we have to specify two radii, `x` and `y` in that order.
 
-These may then be followed by position values as with `circle()` to move the center of the ellipse around. In the example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the center of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.
+These may then be followed by one or two `<position>` values, as with `circle()`, to define the location of the center of the ellipse. In the example below, we have an ellipse with an `x` radius of `40%`, a `y` radius of `50%` and the `<position>` set to `left`. This means that the center of the ellipse is at the center of the left edge of the reference box. This creates a half ellipse shape around which the text will wrap. You can change these values to see how the ellipse changes.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}
 
-The keyword values of `closest-side` and `farthest-side` are useful to create a quick ellipse based on the size of the floated element reference box.
+The keyword values of `closest-side` and `farthest-side` are useful in creating a quick ellipse based on the size of the floated element reference box.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}
 
 ## polygon()
 
-The final Basic Shape is the most complex and enables the creation of many side shapes by way of creating a `polygon()`. This shape accepts three or more pairs of values (a polygon must at least draw a triangle). These values are co-ordinates drawn with reference to the reference box.
+Another basic shape is more complex and enables the creation of multiple-sided polygon shape with the  [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon) function. This shape accepts three or more pairs of values (a polygon must at least draw a triangle). Each space-separated pair of values, each pair separated with a comma, are coordinates drawn with reference to the reference box. Each pair of coordinates defines an edge of the polygon, with the final edge defined by the first and last set of coordinates.
 
-In the example below I have created a shape for text to follow using the `polygon()`, you can change any of the values to see how the shape is changed.
+The example below creates a shape for text to follow using the `polygon()`. Change any of the coordinate values to see how the shape is changed.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}
 
-You may well find the Firefox Shape Inspector very useful here to create your polygon shape. The screenshot below shows the shape highlighted in the tool.
+To create even more complex shapes, you can define the outline of any shape with the [`path()`](/en-US/docs/Web/CSS/basic-shape/path) or  [`shape()`](/en-US/docs/Web/CSS/basic-shape/shape) functions.
+
+The `inset()`, `circle()`, `ellipse()`, and `polygon()` are inspectable and editable using the Firefox Developer Tools Shape Inspector. The screenshot below shows the shape highlighted in the tool.
 
 ![The polygon basic shape, highlighted with the Shapes Inspector.](shapes-polygon.png)
 

From a912b203d00b4a70a08efc826292021596d11101 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Tue, 28 May 2024 18:30:51 -0700
Subject: [PATCH 08/16] update to intro

---
 files/en-us/web/css/css_shapes/index.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/files/en-us/web/css/css_shapes/index.md b/files/en-us/web/css/css_shapes/index.md
index 68fc3fb1f88966d..53e4beb3a3d8cad 100644
--- a/files/en-us/web/css/css_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/index.md
@@ -26,10 +26,10 @@ The example below shows an image that has been floated left, and the `shape-outs
 ### Properties
 
 - {{cssxref("shape-image-threshold")}}
-- {{cssxref("shape-inside")}}
 - {{cssxref("shape-margin")}}
 - {{cssxref("shape-outside")}}
-- {{cssxref("shape-padding")}}
+
+> **Note:** The CSS shapes module introduces the `shape-inside` and `shape-padding` properties that have not yet been implemented.
 
 ### Data types
 
@@ -48,7 +48,7 @@ The example below shows an image that has been floated left, and the `shape-outs
 
 ### Terms
 
-- [Reference box]()
+- [Reference box](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes#the_reference_box)
 
 ## Guides
 
@@ -61,9 +61,9 @@ Developer Tools
 
     - : Using `border-radius` curvatures and CSS box model values to create shapes
 
-- [Basic shapes](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes)
+- [Basic shapes with `shape-outside`](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes)
  
-    - : something
+    - : Creating rectangles, circles, ellipses and polygons with CSS shapes, the reference box, and the `shape-outside` property.
 
 - [Shapes from images](/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images)
 
@@ -71,7 +71,7 @@ Developer Tools
 
 ## Related concepts
 
-- [CSS motion path](/en-US/docs/Web/CSS/CSS_motion_path) module
+[CSS motion path](/en-US/docs/Web/CSS/CSS_motion_path) module
 
     - {{cssxref("offset")}}
     - {{cssxref("offset-anchor")}}
@@ -81,20 +81,20 @@ Developer Tools
     - {{cssxref("offset-rotate")}}
     - {{cssxref("ray")}} function
 
-- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
+[CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
 
     - {{cssxref("clip")}}
     - {{cssxref("clip-path")}}
-    - {{cssxref("clip-rule")}}
+    - {{SVGAttr("clip-rule")}}
     - {{cssxref("mask")}}
     - {{cssxref("mask-origin")}}
     - {{cssxref("mask-position")}}
 
-- [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders) module
+[CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders) module
 
     - {{cssxref("border-radius")}} shorthand
 
-- [CSS box model](/en-US/docs/Web/CSS/CSS_Box_Model) module
+[CSS box model](/en-US/docs/Web/CSS/CSS_Box_Model) module
 
     - {{cssxref("box-edge")}} data type
 

From 8ddc409c4474f7cfbef714e1b7eca3e0a0e6cb28 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Tue, 28 May 2024 18:33:09 -0700
Subject: [PATCH 09/16] revert guide

---
 .../web/css/css_shapes/basic_shapes/index.md  | 77 +++++++++----------
 1 file changed, 37 insertions(+), 40 deletions(-)

diff --git a/files/en-us/web/css/css_shapes/basic_shapes/index.md b/files/en-us/web/css/css_shapes/basic_shapes/index.md
index d3cad8b3a4dff5f..2ff12d535bb90c1 100644
--- a/files/en-us/web/css/css_shapes/basic_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/basic_shapes/index.md
@@ -1,12 +1,12 @@
 ---
-title: Basic shapes with shape-outside
+title: Basic shapes
 slug: Web/CSS/CSS_shapes/Basic_shapes
 page-type: guide
 ---
 
 {{CSSRef}}
 
-CSS Shapes can be defined using the {{cssxref("&lt;basic-shape&gt;")}} type. In this guide, we discuss creating rectangles, circles, ellipses and polygons with the {{cssxref("shape-outside")}} property, part of features defined in the [CSS shapes module](/en-US/docs/Web/CSS/CSS_shapes).
+CSS Shapes can be defined using the {{cssxref("&lt;basic-shape&gt;")}} type, and in this guide I'll explain how each of the different values accepted by this type work. They range from simple circles to complex polygons.
 
 Before looking at shapes, it is worth understanding two pieces of information that go together to make these shapes possible:
 
@@ -15,30 +15,27 @@ Before looking at shapes, it is worth understanding two pieces of information th
 
 ## The \<basic-shape> type
 
-The [`<basic-shape>`](/en-US/docs/Web/CSS/basic-shape) type is used as the value for all of our basic shapes. This type is a functional notation: the type of shape is followed by parentheses, inside of which are additional values used to describe the shape.
+The `<basic-shape>` type is used as the value for all of our basic shapes. This type uses Functional Notation: the type of shape is followed by parenthese, inside of which are additional values used to describe the shape.
 
-The arguments that are accepted vary depending on the shape that you are creating. We will cover these in the examples below.
+The arguments which are accepted vary depending on the shape that you are creating. We will cover these in the examples below.
 
 ## The reference box
 
-Understanding the reference box used by CSS shapes is important when using basic shapes, as it defines each shape's coordinate system. You have already met the reference box in [the guide on creating shapes from box values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values), which directly uses the reference box to create the shape.
+Understanding the reference box used by CSS Shapes is important when using basic shapes, as it defines each shape's coordinate system. You have already met the reference box in [the guide on creating shapes from Box Values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values), which directly uses the reference box to create the shape.
 
-The screenshot below is of the Firefox Shapes Inspector showing the reference box in use when you inspect a circle created using `shape-outside: circle(50%)`. The element has 20 pixels of padding, border and margin applied. The Shapes Inspector highlights these reference boxes.
+The Firefox Shapes Inspector helpfully shows the reference box in use when you inspect a shape. In the screenshot below I have created a circle, using `shape-outside: circle(50%)`. The floated element has 20 pixels of padding, border and margin applied, and the Shapes Inspector highlights these reference boxes. When using a basic shape, the reference box used by default is the margin-box. You can see in the screenshot that the shape is being defined with reference to that part of the Box Model.
 
-![Text wrapping around a circle floated left. The left edge of the text is circular abutting the clipped shape on the outside of the margin with the margin following the shape clipping.](shapes-reference-box.png)
+![An imaged clipped into a circle floated left, with a paragraph of text. The left edge of the text is circular abutting the clipped shape on the outside of the margin with the margin following the shape clipping.](shapes-reference-box.png)
 
-When using a basic shape, the reference box used by default is the `margin-box`. You can see in the screenshot that the shape is being defined with reference to that part of the Box Model.
-
-While the default reference box is `margin-box`, this can be controlled. To set a different box as the reference box, include the box values after your basic shape definition.
-
-These two declarations are the same:
+You can add the various box values after your basic shape definition. Therefore the default behavior is as if you have defined.
 
 ```css
-shape-outside: circle(50%);
-shape-outside: circle(50%) margin-box;
+.shape {
+  shape-outside: circle(50%) margin-box;
+}
 ```
 
-For your shape to use a different reference box, include a different {{cssxref("box-edge")}} value, for example, to use the border as a reference box for our circle, set:
+You can therefore change this in order that your shape uses the different parts of the box model, for example to use the border.
 
 ```css
 .shape {
@@ -46,15 +43,15 @@ For your shape to use a different reference box, include a different {{cssxref("
 }
 ```
 
-The `margin-box` will clip the shape. This means that shapes created in reference to other shapes that extend past the margin box will have the shape clipped to the margin box. This is demonstrated following basic shapes examples.
+What is worth noting is that the `margin-box` will clip the shape, therefore shapes created in reference to other shapes which extend past the margin box will have the shape clipped to the margin box. We will see this in the following examples of basic shapes.
 
-For a more extensive explanation of references boxes as they apply to CSS Shapes, see [Understanding reference boxes for CSS shapes](http://razvancaliman.com/writing/css-shapes-reference-boxes/).
+For an excellent description of references boxes as they apply to CSS Shapes, see [Understanding Reference Boxes for CSS Shapes](http://razvancaliman.com/writing/css-shapes-reference-boxes/).
 
 ## inset()
 
-The [`inset()`](/en-US/docs/Web/CSS/basic-shape/inset) function defines a rectangle. This may not seem very useful as floating an item, without shapes, will give you a rectangular shape around it. However, the `inset()` type enables the definition of offsets, thus pulling the content in over the shape.
+The `inset()` type defines a rectangle, which may not seem very useful as floating an item will give you a rectangular shape around it. However the `inset()` types enables the definition of offsets, thus pulling the content in over the shape.
 
-The `inset()` function takes up to four offset values for the offsets from side, plus an optional `round` keyword followed by a {{cssxref("border-radius")}} value. The below CSS creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels.
+Therefore `inset()` takes four values for the top, right, bottom and left values plus a final value for `border-radius`. The below CSS creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels.
 
 ```css
 .shape {
@@ -63,7 +60,7 @@ The `inset()` function takes up to four offset values for the offsets from side,
 }
 ```
 
-The offset values use the same rules as we use for the {{cssxref("margin")}} shorthand. Four space-separated values define the top, right, bottom, and left offsets, in that order. You can also set more than one offset at once. If there is only one value, it applies to all sides. If there are two values, the top and bottom offsets are set to the first value and the right and left offsets are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. So, the above rules could also be described as:
+Using the same rules as we use for the margin shorthand, you can set more than one offset at once. If there is only one value, it applies to all sides. If there are two values, the top and bottom offsets are set to the first value and the right and left offsets are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. So, the above rules could also be described as:
 
 ```css
 .shape {
@@ -76,35 +73,37 @@ In the example below we have an `inset()` shape used to pull content over the fl
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}
 
-You can also add the box value that you wish to use as a reference box. In the example below change the reference box from `margin-box` to `border-box`, `padding-box` or `content-box` to see how the reference box is used as the starting point before offsets are calculated changes.
+You can also add the Box Value that you wish to use as a reference box. In the example below change the reference box from `margin-box` to `border-box`, `padding-box` or `content-box` to see how the reference box used as the starting point before offsets are calculated changes.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}
 
-You can also create rectangles based on distances from the top and left edges of the reference box with the [`rect()`](/en-US/docs/Web/CSS/basic-shape/rect) function, or by width and height with the [`xywh()`](/en-US/docs/Web/CSS/basic-shape/xywh) function; both of these also support optional rounded corners.
-
 ## circle()
 
-The [`circle()`](/en-US/docs/Web/CSS/basic-shape/circle) value for `shape-outside` can accept two possible arguments. The first is the `shape-radius`.
+The `circle()` value for `shape-outside` can accept two possible arguments. The first is the `shape-radius`.
+
+Both `circle()` and `ellipse()` values for `shape-outside` are specified as accepting this argument of `<shape-radius>`. This argument can be a length or percentage but can also be one of the keywords `closest-side` or `farthest-side`.
 
-Both `circle()` and `ellipse()` values for `shape-outside` are specified as accepting this argument of [`<shape-radius>`](/en-US/docs/Web/CSS/basic-shape#shape-radius). This argument can be a {{cssxref("length")}} or {{cssxref("percentage")}}, but can also be one of the keywords `closest-side` or `farthest-side`.
+The keyword **`closest-side`** uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.
 
-The `closest-side` keyword value uses the length from the center of the shape to the closest side of the reference box to create the radius length. The `farthest-side` keyword value uses the length from the center of the shape to the farthest side of the reference box.
+The keyword **`farthest-side`** uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.
 
-The second argument is a `position`, which accepts a one- or two-value [`<position>`](/en-US/docs/Web/CSS/position_value), specified the same way as {{cssxref("background-position")}}, to indicate the position of the center of the circle. If one or both values are omitted, the values default to `center`.
+The second argument is a `position`. If omitted this will be set to `center`. However you can use any valid position here to indicate the position of the center of the circle.
 
-To create a circle, we include a single radius value, optionally followed by the keyword **at** followed by a position value. This example has a circle applied to a square item with a width and height of `210px`, plus a margin of `20px`. This gives a total width for the reference box of `250px`. The `50%` value for the `<shape-radius>` means the radius is `125px`. The position value is set to `30%`, which is `30%` from the left and at the default vertical `center`.
+Our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword **at** followed by a position value.
+
+In the below example I have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. This gives a total width for the reference box of 140 pixels. I have given a value of 50% for the shape-radius value which means that our radius is 70px. I have then set the position value to 30%.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}
 
-Play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for `inset()`.
+In the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for `inset()`.
 
-As an additional example, use the keywords `top left` for position to make a quarter circle shape in the top left corner of the page. The example below uses generated content to create a quarter-circle shape for text to flow around.
+As an additional example, if you use the keywords `top left` for position, you can make a quarter circle shape in the top left corner of the page. The example below uses generated content to create a quarter circle shape for text to flow around.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}
 
 ### The shape will be clipped by the margin box
 
-As noted in [reference boxes](#the-reference-box) above, the `margin-box` will clip the shape. You can see this by moving the center of our circle towards the content by setting the position to `60%`. The center of the circle will be nearer to the content and the circle will extend past the margin-box. This means that the extension becomes clipped and squared off.
+When describing Reference Boxes I explained that the margin-box will clip the shape. You can see this by moving the center of our circle towards the content by setting the position to 60%. The center of the circle is now nearer the content and the circle extends past the margin-box. This means that the extension becomes clipped and squared off.
 
 ```css
 img {
@@ -117,28 +116,26 @@ img {
 
 ## ellipse()
 
-An ellipse is essentially a squashed circle. As such, the [`ellipse()`](/en-US/docs/Web/CSS/basic-shape/ellipse) function acts in a very similar way to `circle()`, except that we have to specify two radii, `x` and `y` in that order.
+An ellipse is essentially a squashed circle and so `ellipse()` acts in a very similar way to `circle()` except that we have to specify two radii x and y in that order.
 
-These may then be followed by one or two `<position>` values, as with `circle()`, to define the location of the center of the ellipse. In the example below, we have an ellipse with an `x` radius of `40%`, a `y` radius of `50%` and the `<position>` set to `left`. This means that the center of the ellipse is at the center of the left edge of the reference box. This creates a half ellipse shape around which the text will wrap. You can change these values to see how the ellipse changes.
+These may then be followed by position values as with `circle()` to move the center of the ellipse around. In the example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the center of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}
 
-The keyword values of `closest-side` and `farthest-side` are useful in creating a quick ellipse based on the size of the floated element reference box.
+The keyword values of `closest-side` and `farthest-side` are useful to create a quick ellipse based on the size of the floated element reference box.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}
 
 ## polygon()
 
-Another basic shape is more complex and enables the creation of multiple-sided polygon shape with the  [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon) function. This shape accepts three or more pairs of values (a polygon must at least draw a triangle). Each space-separated pair of values, each pair separated with a comma, are coordinates drawn with reference to the reference box. Each pair of coordinates defines an edge of the polygon, with the final edge defined by the first and last set of coordinates.
+The final Basic Shape is the most complex and enables the creation of many side shapes by way of creating a `polygon()`. This shape accepts three or more pairs of values (a polygon must at least draw a triangle). These values are co-ordinates drawn with reference to the reference box.
 
-The example below creates a shape for text to follow using the `polygon()`. Change any of the coordinate values to see how the shape is changed.
+In the example below I have created a shape for text to follow using the `polygon()`, you can change any of the values to see how the shape is changed.
 
 {{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}
 
-To create even more complex shapes, you can define the outline of any shape with the [`path()`](/en-US/docs/Web/CSS/basic-shape/path) or  [`shape()`](/en-US/docs/Web/CSS/basic-shape/shape) functions.
-
-The `inset()`, `circle()`, `ellipse()`, and `polygon()` are inspectable and editable using the Firefox Developer Tools Shape Inspector. The screenshot below shows the shape highlighted in the tool.
+You may well find the Firefox Shape Inspector very useful here to create your polygon shape. The screenshot below shows the shape highlighted in the tool.
 
 ![The polygon basic shape, highlighted with the Shapes Inspector.](shapes-polygon.png)
 
-Another useful resource is [Clippy](https://bennettfeely.com/clippy/) - a tool for creating shapes for `clip-path`, as the values for Basic Shapes are the same as those used for `clip-path`.
+Another useful resource is [Clippy](https://bennettfeely.com/clippy/) - a tool for creating shapes for `clip-path`, as the values for Basic Shapes are the same as those used for `clip-path`.
\ No newline at end of file

From 3236ec349a7c7b4eedc21e118c0f05d0d548377b Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Tue, 28 May 2024 19:20:30 -0700
Subject: [PATCH 10/16] finish module landing page.

---
 files/en-us/web/css/css_shapes/index.md | 38 ++++++++++++-------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/files/en-us/web/css/css_shapes/index.md b/files/en-us/web/css/css_shapes/index.md
index 53e4beb3a3d8cad..34892de0a07ef08 100644
--- a/files/en-us/web/css/css_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/index.md
@@ -54,49 +54,49 @@ The example below shows an image that has been floated left, and the `shape-outs
 
 - [Overview of shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes)
 
-    - : Defining basic shapes with the `shape-margin` and  `clip-path` properties, and debugging basic shapes with 
+    - : Defining basic shapes with the `shape-margin` and  `clip-path` properties, and debugging basic shapes with
 Developer Tools
 
 - [Shapes from box values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values)
 
-    - : Using `border-radius` curvatures and CSS box model values to create shapes
+    - : Using `border-radius` curvatures and CSS box model values to create shapes.
 
 - [Basic shapes with `shape-outside`](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes)
- 
+
     - : Creating rectangles, circles, ellipses and polygons with CSS shapes, the reference box, and the `shape-outside` property.
 
 - [Shapes from images](/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images)
 
-    - : something
+    - :  Create shapes from images file with an alpha channel and CSS Gradients.
 
 ## Related concepts
 
 [CSS motion path](/en-US/docs/Web/CSS/CSS_motion_path) module
 
-    - {{cssxref("offset")}}
-    - {{cssxref("offset-anchor")}}
-    - {{cssxref("offset-distance")}}
-    - {{cssxref("offset-path")}}
-    - {{cssxref("offset-position")}}
-    - {{cssxref("offset-rotate")}}
-    - {{cssxref("ray")}} function
+- {{cssxref("offset")}}
+- {{cssxref("offset-anchor")}}
+- {{cssxref("offset-distance")}}
+- {{cssxref("offset-path")}}
+- {{cssxref("offset-position")}}
+- {{cssxref("offset-rotate")}}
+- {{cssxref("ray")}} function
 
 [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
 
-    - {{cssxref("clip")}}
-    - {{cssxref("clip-path")}}
-    - {{SVGAttr("clip-rule")}}
-    - {{cssxref("mask")}}
-    - {{cssxref("mask-origin")}}
-    - {{cssxref("mask-position")}}
+- {{cssxref("clip")}}
+- {{cssxref("clip-path")}}
+- {{SVGAttr("clip-rule")}}
+- {{cssxref("mask")}}
+- {{cssxref("mask-origin")}}
+- {{cssxref("mask-position")}}
 
 [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders) module
 
-    - {{cssxref("border-radius")}} shorthand
+- {{cssxref("border-radius")}} shorthand
 
 [CSS box model](/en-US/docs/Web/CSS/CSS_Box_Model) module
 
-    - {{cssxref("box-edge")}} data type
+- {{cssxref("box-edge")}} data type
 
 ## Specifications
 

From 8dd0585e12a51cfd7e17aca5de98724ebc8f9910 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Tue, 28 May 2024 19:24:21 -0700
Subject: [PATCH 11/16] finish module landing page.

---
 files/en-us/web/css/css_shapes/basic_shapes/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/css_shapes/basic_shapes/index.md b/files/en-us/web/css/css_shapes/basic_shapes/index.md
index 2ff12d535bb90c1..5c189cd30e8ac36 100644
--- a/files/en-us/web/css/css_shapes/basic_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/basic_shapes/index.md
@@ -138,4 +138,4 @@ You may well find the Firefox Shape Inspector very useful here to create your po
 
 ![The polygon basic shape, highlighted with the Shapes Inspector.](shapes-polygon.png)
 
-Another useful resource is [Clippy](https://bennettfeely.com/clippy/) - a tool for creating shapes for `clip-path`, as the values for Basic Shapes are the same as those used for `clip-path`.
\ No newline at end of file
+Another resource is [Clippy](https://bennettfeely.com/clippy/), a tool for creating shapes with examples using the {{cssxref("clip-path")}}, which uses the same basic shape functions and values as `shape-outside`.
\ No newline at end of file

From cb27e1a7265665452188ec2391b398781bb56382 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@openwebdocs.org>
Date: Tue, 28 May 2024 19:27:12 -0700
Subject: [PATCH 12/16] Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/en-us/web/css/css_shapes/index.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/files/en-us/web/css/css_shapes/index.md b/files/en-us/web/css/css_shapes/index.md
index 34892de0a07ef08..ad456c9b604bc4a 100644
--- a/files/en-us/web/css/css_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/index.md
@@ -3,13 +3,13 @@ title: CSS shapes
 slug: Web/CSS/CSS_shapes
 page-type: css-module
 spec-urls:
- - https://drafts.csswg.org/css-shapes-1/
- - https://drafts.csswg.org/css-shapes-2/
+  - https://drafts.csswg.org/css-shapes-1/
+  - https://drafts.csswg.org/css-shapes-2/
 ---
 
 {{CSSRef}}
 
-The **CSS shapes** module describes geometric shapes that can be used in CSS and defines properties that make use of shapes to control the geometry of an element’s float area, to apply to exclusions, and to apply to an element’s content area. 
+The **CSS shapes** module describes geometric shapes that can be used in CSS and defines properties that make use of shapes to control the geometry of an element's float area, to apply to exclusions, and to apply to an element's content area.
 
 The specification defines several ways to define shapes. Shapes enable wrapping content around a shape rather than following the rectangle of the element's box. Shapes can also be used to wrap content within the element.
 
@@ -54,20 +54,20 @@ The example below shows an image that has been floated left, and the `shape-outs
 
 - [Overview of shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes)
 
-    - : Defining basic shapes with the `shape-margin` and  `clip-path` properties, and debugging basic shapes with
-Developer Tools
+  - : Defining basic shapes with the `shape-margin` and `clip-path` properties, and debugging basic shapes with
+    Developer Tools
 
 - [Shapes from box values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values)
 
-    - : Using `border-radius` curvatures and CSS box model values to create shapes.
+  - : Using `border-radius` curvatures and CSS box model values to create shapes.
 
 - [Basic shapes with `shape-outside`](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes)
 
-    - : Creating rectangles, circles, ellipses and polygons with CSS shapes, the reference box, and the `shape-outside` property.
+  - : Creating rectangles, circles, ellipses and polygons with CSS shapes, the reference box, and the `shape-outside` property.
 
 - [Shapes from images](/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images)
 
-    - :  Create shapes from images file with an alpha channel and CSS Gradients.
+  - : Create shapes from images file with an alpha channel and CSS Gradients.
 
 ## Related concepts
 

From 930c8f828e5c6086d830527a8499d6e2dc105492 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@openwebdocs.org>
Date: Tue, 28 May 2024 19:34:22 -0700
Subject: [PATCH 13/16] flaw fix

---
 files/en-us/web/css/css_shapes/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/css_shapes/index.md b/files/en-us/web/css/css_shapes/index.md
index ad456c9b604bc4a..d1c2445e1a99e8e 100644
--- a/files/en-us/web/css/css_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/index.md
@@ -90,11 +90,11 @@ The example below shows an image that has been floated left, and the `shape-outs
 - {{cssxref("mask-origin")}}
 - {{cssxref("mask-position")}}
 
-[CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders) module
+[CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module
 
 - {{cssxref("border-radius")}} shorthand
 
-[CSS box model](/en-US/docs/Web/CSS/CSS_Box_Model) module
+[CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module
 
 - {{cssxref("box-edge")}} data type
 

From 96078641dd24452edfa9300e2cf595d419a00734 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@openwebdocs.org>
Date: Wed, 29 May 2024 11:48:11 -0700
Subject: [PATCH 14/16] Apply suggestions from code review

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 files/en-us/web/css/css_shapes/basic_shapes/index.md | 2 +-
 files/en-us/web/css/css_shapes/index.md              | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/files/en-us/web/css/css_shapes/basic_shapes/index.md b/files/en-us/web/css/css_shapes/basic_shapes/index.md
index 5c189cd30e8ac36..ac0b76f677e3211 100644
--- a/files/en-us/web/css/css_shapes/basic_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/basic_shapes/index.md
@@ -138,4 +138,4 @@ You may well find the Firefox Shape Inspector very useful here to create your po
 
 ![The polygon basic shape, highlighted with the Shapes Inspector.](shapes-polygon.png)
 
-Another resource is [Clippy](https://bennettfeely.com/clippy/), a tool for creating shapes with examples using the {{cssxref("clip-path")}}, which uses the same basic shape functions and values as `shape-outside`.
\ No newline at end of file
+Another resource is [Clippy](https://bennettfeely.com/clippy/), a tool for creating shapes with examples using {{cssxref("clip-path")}}, which uses the same basic shape functions and values as `shape-outside`.
\ No newline at end of file
diff --git a/files/en-us/web/css/css_shapes/index.md b/files/en-us/web/css/css_shapes/index.md
index d1c2445e1a99e8e..9acbe7a81c9ada8 100644
--- a/files/en-us/web/css/css_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/index.md
@@ -11,7 +11,7 @@ spec-urls:
 
 The **CSS shapes** module describes geometric shapes that can be used in CSS and defines properties that make use of shapes to control the geometry of an element's float area, to apply to exclusions, and to apply to an element's content area.
 
-The specification defines several ways to define shapes. Shapes enable wrapping content around a shape rather than following the rectangle of the element's box. Shapes can also be used to wrap content within the element.
+The specification defines several ways to create shapes. Content can be wrapped around or within a shape rather than following the default rectangle shape of the element's box.
 
 Shapes define geometries that can be used as CSS values. This module provides functions for creating ellipses, polygons, and arbitrary geometries. Other CSS modules can make use of shapes defined in this specification, including [CSS motion path](/en-US/docs/Web/CSS/CSS_motion_path) and [CSS masking](/en-US/docs/Web/CSS/CSS_masking).
 
@@ -55,7 +55,7 @@ The example below shows an image that has been floated left, and the `shape-outs
 - [Overview of shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes)
 
   - : Defining basic shapes with the `shape-margin` and `clip-path` properties, and debugging basic shapes with
-    Developer Tools
+    Developer Tools.
 
 - [Shapes from box values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values)
 
@@ -63,11 +63,11 @@ The example below shows an image that has been floated left, and the `shape-outs
 
 - [Basic shapes with `shape-outside`](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes)
 
-  - : Creating rectangles, circles, ellipses and polygons with CSS shapes, the reference box, and the `shape-outside` property.
+  - : Creating rectangles, circles, ellipses, and polygons with CSS shapes, the reference box, and the `shape-outside` property.
 
 - [Shapes from images](/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images)
 
-  - : Create shapes from images file with an alpha channel and CSS Gradients.
+  - : Creating shapes from semi-transparent image files and CSS Gradients.
 
 ## Related concepts
 

From 9c103d53313ff12c728e51ac46da64f0572b1d23 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@openwebdocs.org>
Date: Wed, 29 May 2024 11:48:49 -0700
Subject: [PATCH 15/16] Update files/en-us/web/css/css_shapes/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 files/en-us/web/css/css_shapes/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/css_shapes/index.md b/files/en-us/web/css/css_shapes/index.md
index 9acbe7a81c9ada8..8f3b1dbbb1d0ec2 100644
--- a/files/en-us/web/css/css_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/index.md
@@ -9,7 +9,7 @@ spec-urls:
 
 {{CSSRef}}
 
-The **CSS shapes** module describes geometric shapes that can be used in CSS and defines properties that make use of shapes to control the geometry of an element's float area, to apply to exclusions, and to apply to an element's content area.
+The **CSS shapes** module describes geometric shapes. It also defines CSS properties that can use the shapes to control the geometry of an element's float area; this area can then be applied to exclusions, or specify an element's content area.
 
 The specification defines several ways to create shapes. Content can be wrapped around or within a shape rather than following the default rectangle shape of the element's box.
 

From 43413f9ac8e348747392df568d82dc02fc89b6bb Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@openwebdocs.org>
Date: Wed, 29 May 2024 11:50:36 -0700
Subject: [PATCH 16/16] Update
 files/en-us/web/css/css_shapes/basic_shapes/index.md

---
 files/en-us/web/css/css_shapes/basic_shapes/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/css_shapes/basic_shapes/index.md b/files/en-us/web/css/css_shapes/basic_shapes/index.md
index ac0b76f677e3211..b3af9406a4720e5 100644
--- a/files/en-us/web/css/css_shapes/basic_shapes/index.md
+++ b/files/en-us/web/css/css_shapes/basic_shapes/index.md
@@ -138,4 +138,4 @@ You may well find the Firefox Shape Inspector very useful here to create your po
 
 ![The polygon basic shape, highlighted with the Shapes Inspector.](shapes-polygon.png)
 
-Another resource is [Clippy](https://bennettfeely.com/clippy/), a tool for creating shapes with examples using {{cssxref("clip-path")}}, which uses the same basic shape functions and values as `shape-outside`.
\ No newline at end of file
+Another resource is [Clippy](https://bennettfeely.com/clippy/), a tool for creating shapes with examples using the CSS {{cssxref("clip-path")}} property, which uses the same basic shape functions and values as the `shape-outside` property.