32341 text wrap

[dletorey]

Description

Added interactive examples for:

• text-wrap-style
• text-wrap-mode

Motivation

Working on the Convert text-wrap CSS property to a shorthand Issue

Related issues and pull requests

• Content PR
• BCD PR
• Firefox Release note PR
• data PR

[dipikabh]

Hi @dletorey, thanks for the PR!

I started looking at this, but I didn't find the examples in my local preview at this path "http://127.0.0.1:9090/pages/css/".

I am wondering if you also need to do this step, Updating the metadata, so that the examples get added to the page generator.
So you'd have two entries in this live-examples/css-examples/text/meta.json file for the two new examples.

[dletorey]

Hi @dletorey, thanks for the PR!

I started looking at this, but I didn't find the examples in my local preview at this path "http://127.0.0.1:9090/pages/css/".

I am wondering if you also need to do this step, Updating the metadata, so that the examples get added to the page generator. So you'd have two entries in this live-examples/css-examples/text/meta.json file for the two new examples.

I have now added this and yes you are correct.
These 2 urls now work for me, but only in nightly/beta:

• http://127.0.0.1:9090/pages/css/text-wrap-mode.html
• http://127.0.0.1:9090/pages/css/text-wrap-style.html

[dipikabh]

Thanks, @dletorey, that fixed it.

Yes, based on your BCD PR, I'm testing this in Firefox 124.0b9.

• text-wrap-mode is looking good ✅
• text-wrap-style: The pretty option does not seem to be recognized.

The style inspector also does not show pretty as one of the options for text-wrap-style:

[dletorey]

Thanks, @dletorey, that fixed it.

Yes, based on your BCD PR, I'm testing this in Firefox 124.0b9.

* `text-wrap-mode` is looking good ✅

* `text-wrap-style`: The `pretty` option does not seem to be recognized.

The style inspector also does not show pretty as one of the options for text-wrap-style:

Hi @dipikabh

This is purely due to pretty not yet being supported in Firefox, text-wrap-style is currently only supported in Firefox but further down the line it will be.

text-wrap: pretty; is supported in most chromium based browsers

[dipikabh]

Got it!

In that case, might be a good idea to make text-wrap-style BCD also show support per value, similar to the BCD for text-wrap. Because readers will naturally scroll down to the BCD section after they see the yellow cross.

[dipikabh]

Thanks for adding these examples, @dletorey!

[github-actions]

Congratulations on your first merged pull request. 🎉 Thank you for your contribution! Did you know we have a project board with high-impact contribution opportunities? We look forward to your next contribution.