32341 text wrap - Githubissues

mdn / interactive-examples

Home of the MDN live code editor interactive examples

Creative Commons Zero v1.0 Universal

725 stars 506 forks source link

32341 text wrap #2746

Closed dletorey closed 5 months ago

dletorey commented 6 months ago

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

dipikabh commented 6 months ago

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 commented 5 months ago

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:

dipikabh commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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.

github-actions[bot] commented 5 months ago

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.