Re: [csswg-drafts] [css-view-transitions-1] How do the writing-mode and direction properties affect the view-transition pseudo-elements? (#8230)

Let me take another stab at clarifying this since it came up on https://github.com/w3c/csswg-drafts/issues/8958 this as well. Just to make sure we're preserving the right bits from computed style.

There's 2 aspects of layout that ViewTransitions sets up a default animation for :

- A change in the element's viewport based transform. This is covered in https://github.com/w3c/csswg-drafts/issues/8886.
- The size of the element. This is the animation that requires properties like writing-mode so I'll cover that below.

If an element's border box size is changing, which could also involve a change in its aspect ratio, the default animation animates between the layout sizes of the old and new element. Since the element snapshots may not match the size of the replaced element during this animation, we take the following strategy to decide how to scale the snapshots during the animation:

- In the inline direction, the snapshot scales to match the length of that edge.
- In the block direction, the snapshot scales to maintain the same aspect ratio (so there is no weird stretching).

This is because we found that in most use-cases, it's better for a single line of text to be completely visible. The content in the block direction can gradually reveal or hide itself. For example, you click on a button which expands into a details list. If the developer puts `overflow: clip` on the replaced elements, the visual effect is that you see more lines of text as the box size expands.

So we do this by copying over the `writing-mode` and `direction` from the DOM elements onto their group pseudo-element. And setting up the layout of the replaced elements using logical properties:

```css
:root::view-transition-old(*),
:root::view-transition-new(*) {
 position: absolute;
 inset-block-start: 0;
 inline-size: 100%;
 block-size: auto;
}
```

I don't think we need `text-orientation` because the effect of that properties is baked into the captured image itself, i.e, text-orientation will determine how the glyph is rendered when capturing the snapshot. So it doesn't need to impact how the pseudo-elements are rendered.

-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8230#issuecomment-1631534994 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 11 July 2023 21:27:48 UTC