Update responsive-iframes-explainer.md

chrishtr · web-flow · commit 931288b09954 · 2025-05-19T15:35:18.000-07:00
Fix typos
diff --git a/css-sizing-4/responsive-iframes-explainer.md b/css-sizing-4/responsive-iframes-explainer.md
@@ -2,7 +2,7 @@
 
 ## Problem description
 
-[url](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) are very useful for sandboxing web content into different documents. The options currently available are:
+[Iframes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) are very useful for sandboxing web content into different documents. The options currently available are:
  1. A [same-origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) iframe, which provides full style & 
 layout isolation, and by-default script isolation. This prevents the parent and child documents from accidentally interfering with each other.
  2. A cross-origin iframe, which additionally provides robust security and privacy against untrusted embedders or embedees.
@@ -14,17 +14,17 @@ This is a problem:
  * From a user's perspective, iframe scrollbars are a worse UX in cases where the iframe contents are important to them and can fit reasonably in the visible viewport without these additional scrollbars.
  * From a developer's perspective, they are forced to use non-trivial script to communicate natural dimensions across frames in order to help the user have better UX without scrollbars. 
 
-Embedded SVG documents already support responsive layout. *Responsive iframes* add responsive layout to iframes, as long as the embedding and embedded document both opt into do so, thus providing support for responsive layout without losing any of the advantages of iframes in (1) and (2) above.
+Embedded SVG documents (in `<object>`/`<embed>`) already support responsive layout. *Responsive iframes* adds responsive layout to iframes, as long as the embedding and embedded document both opt in to doing so, thus providing support for responsive layout without losing any of the advantages of iframes in (1) and (2) above.
 
 ## Use cases
 
 Use cases include:
- * 3P comment widgets [example](https://github.com/whatwg/html/issues/555#issuecomment-177836009)
- * Embedding self-contained worked examples in teaching UI (https://browser.engineering/layout.html)
+ * 3P comment widgets ([example](https://github.com/whatwg/html/issues/555#issuecomment-177836009))
+ * Embedding self-contained worked examples in teaching UI ([example](https://browser.engineering/layout.html))
 
 In general, there is a lot of demand for this feature, as evidenced by:
  * [Stack overflow](https://stackoverflow.com/search?q=resize+iframe)
- * Many comments and positive reactions on the [issue proposing the feature for HTML](https://github.com/whatwg/html/issues/555), and [the same for CSS](https://github.com/w3c/csswg-drafts/issues/1771).
+ * Many comments and positive reactions on the [issue proposing the feature for HTML](https://github.com/whatwg/html/issues/555), and [the same for CSS](https://github.com/w3c/csswg-drafts/issues/1771)
  * Existence of multiple polyfills
 
 ## Solution
@@ -37,18 +37,19 @@ The double opt-in preserves:
  * Backward compatibility for existing content
  * Privacy and security guarantees of cross-origin content
 
-The "one-shot" sizing to natural dimensions avoids:
+The "one-shot" (only at `load` time) sizing to natural dimensions avoids:
  * Performance issues and CLS due to changing iframe sizing (To further mitigatge performance risks, limitations on levels of `<iframe>` nesting may be imposed.)
  * Potential infinite layout loops
 
 ## Example:
 
-The following example wil display an iframe of content `width `300px` (the default) and height `1000px` (the height of the `<div>`),
-plus a 1px border.
+The following example wil display an iframe of content width `300px` (the default) and height `1000px` (the height of the `<div>`),
+plus a `1px` border. Without this feature, the iframe would have been `150px` (the defaut) tall with a vertical scrollbar.
 
 Embedding document:
 
 ```html
+<!doctype HTML>
 <style>
   iframe {
     contain-intrinsic-size: from-element;
@@ -60,16 +61,17 @@ Embedding document:
 
 `my-iframe.html`:
 ```html
+<!doctype HTML>
 <style>
   * { margin: 0; }
 </style>
-<meta name="responsive-embedded-sizing">
-<div style="height: 100px">
+<meta name="responsive-embedded-sizing"></meta>
+<div style="height: 100px"></div>
 ```
 
 ## Future extensions
 
-A JavaScript API could be added in the future that would allow embedded documents to request relayout in their embedding document context.
+A JavaScript API could be added in the future that would allow embedded documents to request relayout in their embedding document context. This would allow dynamically generated iframe documents to update at times other than `load`.
 
 ## Privacy and security
 
