fix: correct typos and improve wording across multiple documentation files

Author: martrapp

src/content/docs/basics/default-animations.mdx

@@ -10,7 +10,7 @@ head:
 
 If you do not specify custom animations, the View Transition API automatically assigns two types of animations to the pseudo-elements:
 
-* **Exit/Entry animations**, which consist of fade-out animation fromm 100% to 0% opacity for the old image and a fade-in animation from 0% to 100% opacity for the new image.
+* **Exit/Entry animations**, which consist of fade-out animation from 100% to 0% opacity for the old image and a fade-in animation from 0% to 100% opacity for the new image.
 * **Group (or Morph) animations**, where the transition group animates differences  in width, height, and position starting from the values of the old image and gradually reaching the values of the new one.  Morph animations are only defined for groups containing both the old and new image.
 
 ## Really?
@@ -33,7 +33,7 @@ By default, both types of animations, entry/exit and group/morph, occur simultan
 
 The above description states that the group animation morphs from the size and position values of the old image to the values of the new image. But how does this work exactly? Morph animations are only defined for groups that have both, the old and the new image. The height, width and position of the group pseudo-element is copied over from the old element. The image pair, the only child of the group, fills the whole group. The old and the new image are inside the image pair, where the new image is rendered above the old image. If the new image is fully transparent at the beginning of the animation, the screen shows the old image in its old position.
 
-During the morph animation, the group moves to the final position of the new image. Doing so, it takes the image-pair and the images withing with it. At the same time, the width and height of the group element transitions towards the width and height of the new image. This change in size might force the images inside the image-pair to react with size changes as well.
+During the morph animation, the group moves to the final position of the new image. Doing so, it takes the image-pair and the images within with it. At the same time, the width and height of the group element transitions towards the width and height of the new image. This change in size might force the images inside the image-pair to react with size changes as well.
 
 Let's assume we start with an old image with an aspect ratio of 2:3 and morph this into a 3:2 new image.
 

src/content/docs/basics/hide-and-seek.mdx

@@ -203,7 +203,7 @@ In the early versions of the View Transition API, the transition groups form a f
 
 Nested view transition groups introduce the ability to clip images not only within their own group but also using their parent or any ancestor further up the hierarchy. The example to the right is built with nested view transition groups. If it doesn't look right, check whether your [browser has support](/basics/test-page/) for them.
 
-Clipping the peudos of the list elements at the `::view-transition-group-children`  pseudo of th list container prevents them from being drawn outside the list element. However, they seem to fly in front of the scrollbars. [This will change.](https://issues.chromium.org/issues/475236700). In the meanwhile you make the group-children pseudo some pixels smaller to keep the scrollbar visible during the animation.
+Clipping the pseudos of the list elements at the `::view-transition-group-children`  pseudo of th list container prevents them from being drawn outside the list element. However, they seem to fly in front of the scrollbars. [This will change.](https://issues.chromium.org/issues/475236700). In the meanwhile you make the group-children pseudo some pixels smaller to keep the scrollbar visible during the animation.
 
 ```css
     ::view-transition-group-children(ul) {
@@ -313,15 +313,15 @@ Another way to simulate `overflow: hidden` or nested view transition groups is t
 <SidePicture>
 It might sound a bit weird, to fight unwanted images with even more images, but the idea is simple: put an [additional curtain](/basics/pseudos/#the-theater-curtain) in front of your stage to hide what you don't want the audience to see.
 
-In some cases it might be sufficient to have some rectangles colored in your site's background color, add a `view-transition-name`, and move their pseudo-images into place as part of the view transition. These rectangles might also have children like paragraphs or buttons, which will then show up on top.
+In some cases it might be sufficient to have some rectangles coloured in your site's background color, add a `view-transition-name`, and move their pseudo-images into place as part of the view transition. These rectangles might also have children like paragraphs or buttons, which will then show up on top.
 
 <iframe
   slot="pic"
   style="height:320px; width:150px; border: none;  margin-right: 1em"
   src="/basics/hide-and-seek/list-stencil2/"
 ></iframe>
 
-The list on the left contains two checkerboard `<div>` elements: one before and one after the list. A button is nested within the lower `<div>`. Both `<div>` elements are assigned view transition names, `stencil1` and `stencil2`. As a result, the `<div>`s produce pseudo-elements that act as visual blockers, effectively concealing any list items that overflow beyond their intended boundaries during the view transition.
+The list on the left contains two chequerboard `<div>` elements: one before and one after the list. A button is nested within the lower `<div>`. Both `<div>` elements are assigned view transition names, `stencil1` and `stencil2`. As a result, the `<div>`s produce pseudo-elements that act as visual blockers, effectively concealing any list items that overflow beyond their intended boundaries during the view transition.
 
 </SidePicture>
 

src/content/docs/basics/javascript.mdx

@@ -89,7 +89,7 @@ interface ViewTransition {
 
 The promises allow you to hook into the different stages of the view transition process.
 
-- The `updateCallbackDone` promise resolves once the update callback fulfills. You can use this to (synchronously) make last-minute changes before the new images are created. If the update function rejects, the `updateCallbackDone` promise rejects, too. View transition processing ends, and the `ready` and `finished` promises also reject.
+- The `updateCallbackDone` promise resolves once the update callback fulfils. You can use this to (synchronously) make last-minute changes before the new images are created. If the update function rejects, the `updateCallbackDone` promise rejects, too. View transition processing ends, and the `ready` and `finished` promises also reject.
 
 - The `ready` promise settles once the pseudo-elements have been inserted into the DOM. Inserting the pseudo-elements triggers their animations. For example, you can use this promise to add your own JavaScript animations using the Web Animation API. If there are errors, like duplicate view transition names, the `ready` promise will reject.
 
@@ -138,7 +138,7 @@ The View Transition API now offers a way to check whether some view transition i
 
 If you use [`mayStartViewTransition`](/tools/utensil-drawer/#maystartviewtransition) from the Utensil Drawer, you can access the current `ViewTransition` object by calling [getCurrentViewTransition](/tools/utensil-drawer/#current-view-transition).
 
-### Canceling and Chaining
+### Cancelling and Chaining
 
 Calling `startViewTransition()` while another view transition is active will interrupt the current view transition, fast forward to the end state of the animations, and start the new view transition from there.
 

src/content/docs/basics/pseudos.mdx

@@ -371,9 +371,9 @@ The View Transition API introduces six types of pseudo-elements:
 - `::view-transition-old`
 - `::view-transition-new`
 
-The `::view-transition` pseudo-element, which is rooted at the document's documentElement[^scoped], is the root of all pseudo-elements created by the View Transition API.
+The `::view-transition` pseudo-element, which is rooted at the document's documentElement, is the root of all pseudo-elements created by the View Transition API.
 
-> This will change when [_scoped_ view transitions](/basics/javascript/#scoped-view-transitions) are available, allowing you to root the pseudo-element tree on any element.
+> Note: [_scoped_ view transitions](/basics/javascript/#scoped-view-transitions) allow you to root the pseudo-element tree on any element.
 
 All these pseudo-elements only exist briefly during the transition effect, making them difficult to spot in the DOM.
 

src/content/docs/basics/styling.mdx

@@ -22,9 +22,9 @@ There are three parts that you influence with CSS when it comes to view transiti
 - Setup animations for elements participating in a view transition
 - Trigger CSS for things other than animations
 
-### Add DOM Elements as Groups to View Transitions
+### Add Elements to View Transitions
 
-If you want a DOM element to participate in view transitions with an individual animation, you assign a value to the [`view-transition-name`](/basics/pseudos/#view-transition-names) CSS property of the element. The browser will then generate three or four [pseudo-elements](/basics/pseudos/#types-of-pseudo-elements) for each _visible_ DOM element with a view transition name. These are a transition group, an image pair, and at least one of the old or new image pseudos.
+If you want a DOM element to participate in view transitions with an individual animation, you assign a value to the [`view-transition-name`](/basics/pseudos/#view-transition-names) CSS property of the element. The browser will then generate three to five [pseudo-elements](/basics/pseudos/#types-of-pseudo-elements) for each _rendered_ DOM element with a view transition name _n_. These are a `::view-transition-group(n)`, a `::view-transition-image-pair(n)`, at least one of the `::view-transition-old(n)` or `::view-transition-new(n)` image pseudos, and potentially a `::view-transition-group-children(n)`  element, in case of nested view transition groups.
 
 ### Define Animations for View Transitions
 
@@ -126,7 +126,7 @@ If both, the old image and the new image for `x` exist, the API defines a [morph
 }
 ```
 
-The `transform` is used to move the deck with the new image on top of the old image from the old image's size, transform, and position to the size, transform, and position of the _captured element_ of the new image, which may even dynamically change during the view transition. If the captured element of the view-transition-name has some CSS transformation applied on the old or new page, like rotate or skew, this will also be honored by the generated transform.
+The `transform` is used to move the deck with the new image on top of the old image from the old image's size, transform, and position to the size, transform, and position of the _captured element_ of the new image, which may even dynamically change during the view transition. If the captured element of the view-transition-name has some CSS transformation applied on the old or new page, like rotate or skew, this will also be honoured by the generated transform.
 
 
 ### Group-Children Animation
@@ -359,7 +359,7 @@ This mechanism can be used to [increase isolation and/or composability](/tips/cs
 
 The initial set of types can be set when calling `startViewTransition()` or it might be specified using the `types` property inside a `@view-transition` rule.
 
-```ts title="Level 2 signature of startViewTranstion()"
+```ts title="Level 2 signature of startViewTransition()"
 document.startViewTransition({ types: ["boom"], update: changeTheDOM });
 ```
 
@@ -475,7 +475,7 @@ Whatever is simple to do with an image is a good candidate for styling the pseud
 **Styling the Captured Element of the New Image:**
 There are some things that you cannot do with an image of a DOM element. That is when you want to interact with the underlying captured element. For example, you might want to change the background colour of the captured element during the view transition. Or you might want to change the content of a text element, or the way its text wraps.
 
-Just be aware that the default styling for the `::view-transition-new(x)` pseudo-element is a fade-in and therefore it is typically not visible at the beginning of the view transiton.
+Just be aware that the default styling for the `::view-transition-new(x)` pseudo-element is a fade-in and therefore it is typically not visible at the beginning of the view transition.
 
 If your old and new image are identical, you can remove the old image and the default animation of the new image:
 ```css

src/content/docs/fwvt/customizing.mdx

@@ -188,7 +188,7 @@ Before you move on, don't forget to reset the overall animation duration to a mo
 
 ## Are There Alternatives to Cross-Fade?
 
-Definitively! Let's replace the cross-fade with a more dynamic animation where the old image fades away and the new image slides in with a subtile upward motion:
+Definitively! Let's replace the cross-fade with a more dynamic animation where the old image fades away and the new image slides in with a subtle upward motion:
 
 ```css
 ::view-transition-old(root) {

src/content/docs/fwvt/enabling.mdx

@@ -125,12 +125,14 @@ Let's dive in!
 
 In this episode, we will focus on sites made up of individual HTML pages connected by links.[^1] During navigation, you typically see the old page replaced by an empty page that gradually loads its content. We are going to replace this traditional page-loading experience with a smooth cross-fade effect that seamlessly blends the pages as you navigate the site.
 
+[^1]: If you have a single page application, be patient. You or your framework have to trigger view transitions by calling [`startViewTransition()`](/basics/javascript/#same-document-view-transitions). We will cover that in another episode.
+
 One of the fascinating things about cross-document view transitions is how they act as a true progressive enhancement for your website.
 Ensure your site functions perfectly without them, then enable them for browsers that natively support the feature.
 
 Users with browsers lacking view transition support will just see regular page loads.
 
-Rumor has it that it only takes a single line of CSS to enable view transitions across all navigations in a multi-page site.
+Rumour has it that it only takes a single line of CSS to enable view transitions across all navigations in a multi-page site.
 
 Here's the magic spell:
 
@@ -142,6 +144,8 @@ Here's the magic spell:
 
 This will add the View Transition API's full-viewport cross-fade whenever you navigate between two pages that include this rule and share the same origin.[^0]
 
+[^0]: "origin" is the name for the `protocol` + `host` + `port` part of an URL, e.g. `https://vtbag.dev`.
+
 In later episodes, we will see how to add more individual animations. Keep in mind not to go overboard with view transition effects.[^o] Your site should remain fully understandable even without them. Remember, it's not just that some browsers don't support view transitions at all. Even for those that do, many users are on older versions without this feature. Plus, some users might simply prefer not to see your view transitions at all.
 
 [^o]: Alright, I may have gone a little overboard on vtbag.dev, but I swear, there's a perfectly good explanation for all of it...
@@ -207,11 +211,11 @@ where `/styles/view-transitions.css` holds the definition
 }
 ```
 
-Having a global stylesheet for view transitions might not feel very componentized at first glance, but it will turn out to be a solid decision for cross-document view transitions.
+Having a global stylesheet for view transitions might not feel very componentised at first glance, but it will turn out to be a solid decision for cross-document view transitions.
 
 Be aware that the CSS defining the animations must be present on the new page you are navigating to. Did you notice the butterflies on this site's home page? **The CSS rules** needed to animate them during navigation **must be included on the destination page**. Since you can navigate away from the home page to almost any other page of the site, the butterfly animation styles need to be included on all of them.
 
-So at least for a site with random access to most pages, a global `view-transition.css` makes a lot of sense for the exit animations. However, if your pages have a limited set of possible predecessors and successors, using multiple, more localized stylesheets might be a better choice for maintainability.
+So at least for a site with random access to most pages, a global `view-transition.css` makes a lot of sense for the exit animations. However, if your pages have a limited set of possible predecessors and successors, using multiple, more localised stylesheets might be a better choice for maintainability.
 
 ## Waiting for the Content to Load
 
@@ -221,6 +225,8 @@ The View Transition API will wait for content to load before the transition star
 
 The browser might need a bit of guidance to determine which part of the page should be ready before starting the animations. A new `<link>` type allows us to [specify what to wait for](/basics/pseudos/#delaying-cross-document-transitions). Ideally, we'd only wait for the content "above the fold".[^2] Since we can fine-tune this later, we'll start with a straightforward approach that waits for the entire body to load.
 
+[^2]: Like the fold of a printed newspaper. The part of the page you see without scrolling.
+
 ```html {4,6  }
 <html>
   <head>
@@ -253,8 +259,3 @@ In the next episode, we'll dive deeper into tweaking the defaults and adding cus
 Thank you for joining on this journey through the exciting world of view transitions.
 Until next time, keep animating, keep experimenting, and most importantly, keep having fun&hellip; with view transitions!
 
-[^0]: "origin" is the name for the `protocol` + `host` + `port` part of an URL, e.g. `https://vtbag.dev`.
-
-[^1]: If you have a single page application, be patient. You or your framework have to trigger view transitions by calling [`startViewTransition()`](/basics/javascript/#same-document-view-transitions). We will cover that in another episode.
-
-[^2]: Like the fold of a printed newspaper. The part of the page you see without scrolling.

src/content/docs/fwvt/healing.mdx

@@ -371,11 +371,13 @@ Setting the images' width to match the width of the group-pseudo container scale
 <style>{`
 .desc {display:flex; flex-wrap: wrap}
 .desc > span {margin: 16px auto; }
-.desc img {disply: block; width: 100%; height: auto; border: 1px solid #8888; box-shadow: 1px 1px 8px #8888}
+.desc img {display: block; width: 100%; height: auto; border: 1px solid #8888; box-shadow: 1px 1px 8px #8888}
 `}</style>
 
 So, instead of making the images same width, we can make them same height and let the width be calculated automatically to preserve the original aspect ration:[^h]
 
+[^h]: The given definition assumes a horizontal writing mode. To accommodate vertical writing modes as well, use `inline-size` instead of `width` and `block-size` instead of `height`.
+
 ```css
 ::view-transition-old(description),
 ::view-transition-new(description) {
@@ -386,7 +388,6 @@ So, instead of making the images same width, we can make them same height and le
 
 This adjustment helps align the images more accurately, preventing unwanted scaling effects. It works effectively in our case because both images contain the same text and the same number of lines.
 
-[^h]: The given definition assumes a horizontal writing mode. To accommodate vertical writing modes as well, use `inline-size` instead of `width` and `block-size` instead of `height`.
 
 ### Aligning the Aspect Ratios During Animations
 

src/content/docs/fwvt/playing.mdx

@@ -459,7 +459,7 @@ Reset / Message.style.fill: "#797"
 </Media>
 </div>
 
-This is how you would like to do it as a software engineer. Have your components, you use view transitions where appropriate, and you know that everything is scoped to your components. Good news: [scoped view transitions](https://vtbag.dev/basics/javascript/#scoped-view-transitions) are on there way.
+This is how you would like to do it as a software engineer. Have your components, you use view transitions where appropriate, and you know that everything is scoped to your components. Good news: [scoped view transitions](/basics/javascript/#scoped-view-transitions) are on there way.
 
 In the meantime (and when you want to automatically synchronize several scoped view transitions on the same element), it would be nice if several calls to `startViewTransition()` would get integrated automatically.