feat: Support extended CSS Page float values such as float: top right

[MurakamiShinyu]

• feat: Support extended CSS Page float values such as float: top right

  • Supports the new float property syntax proposal [css-page-float] float property syntax w3c/csswg-drafts#1251

    Current spec:
    https://drafts.csswg.org/css-page-floats/#float-property

    I think the following syntax would be better for further extensibility:

    float: none | [ block-start || block-end || inline-start || inline-end || 
                    left || right || top || bottom ]
    

    Examples:

    float: top;        // float to top edge
    float: top left;   // float to top left corner
    float: top bottom; // float to top or bottom edge (like 'snap-block' in old proposal)
    float: left right; // float to left or right edge (like 'snap-inline' in old proposal)
    float: top bottom left;       // float to top left or bottom left corner
    float: top bottom left right; // float to top left, top right, bottom left, 
                                  // or bottom right corner
    

  • Improves fit-content inline size determination for inline-start/end or two sides (e.g. top right) page floats.

  • Resolves Update CSS Page Floats #543

• feat: support logical values for CSS clear property (e.g. clear: inline-start)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vivliostyle	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 17, 2025 2:32pm

[MurakamiShinyu]

Test

• 'Page' page floats (2 values)
  • HTML: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/page_floats/page_page_floats_2.html
  • Test: https://vivliostyle.vercel.app/#src=https://raw.githack.com/vivliostyle/vivliostyle.js/master/packages/core/test/files/page_floats/page_page_floats_2.html
• 'Page' page floats (vertical writing-mode, 2 values)
  • HTML: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/page_floats/page_page_floats_vertical_2.html
  • Test: https://vivliostyle.vercel.app/#src=https://raw.githack.com/vivliostyle/vivliostyle.js/master/packages/core/test/files/page_floats/page_page_floats_vertical_2.html
• 'Column' page floats (2 values)
  • HTML: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/page_floats/column_page_floats_2.html
  • Test: https://vivliostyle.vercel.app/#src=https://raw.githack.com/vivliostyle/vivliostyle.js/master/packages/core/test/files/page_floats/column_page_floats_2.html
• 'Column' page floats (vertical writing-mode, 2 values)
  • HTML: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/page_floats/column_page_floats_vertical_2.html
  • Test: https://vivliostyle.vercel.app/#src=https://raw.githack.com/vivliostyle/vivliostyle.js/master/packages/core/test/files/page_floats/column_page_floats_vertical_2.html
• Inline page floats (2 values)
  • HTML: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/page_floats/inline_page_floats_2.html
  • Test: https://vivliostyle.vercel.app/#src=https://raw.githack.com/vivliostyle/vivliostyle.js/master/packages/core/test/files/page_floats/inline_page_floats_2.html
• Inline page floats (vertical writing-mode, 2 values)
  • HTML: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/page_floats/inline_page_floats_vertical_2.html
  • Test: https://vivliostyle.vercel.app/#src=https://raw.githack.com/vivliostyle/vivliostyle.js/master/packages/core/test/files/page_floats/inline_page_floats_vertical_2.html
• float: snap-block (2 values)
  • HTML: https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/test/files/page_floats/float_snap-block_2.html
  • Test: https://vivliostyle.vercel.app/#src=https://raw.githack.com/vivliostyle/vivliostyle.js/master/packages/core/test/files/page_floats/float_snap-block_2.html