feat(css): Add ruby-overhang property

[bsmth]

Description

This PR adds a page for the CSS ruby-overhang property.

• The interactive example is not being reloaded when switching options/choices. Needs investigation.

TODO:

• Fix / remove interactive example
• chore(main): release 2.22.0 data#981

Motivation

We're missing a docs page for it.

Additional details

I took a look through relnotes from Jen Simmons' for Safari 18.2 which has some good examples:

• 18.2 relnotes https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
• demo https://codepen.io/jensimmons/pen/azoOgbq?editors=1100

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/ruby-overhang

(comment last updated: 2025-06-26 07:53:19)

[bsmth]

I think this doesn't work because we're animating the values? I can't figure out why this works:

```css interactive-example-choice
ruby-overhang: auto;
ruby-position: over;
```

```css interactive-example-choice
ruby-overhang: none;
ruby-position: under;
```

But it doesn't work after removing ruby-position

[bsmth]

It looks like the iframe is not being reloaded, in other words, if you change the default value for interactive-example-choice to be either auto or none, it works on page load.

[bsmth]

Anyone from @mdn/ja-content interested in having a look sometime? Not urgent! :)