Bi-directional layout support by tjamaan · Pull Request #736 · DioxusLabs/taffy

tjamaan · 2024-11-06T22:25:17Z

Objective

Add support for bi-directional layout (left-to-right and right-to-left) via the direction CSS style property.
Fixes Support direction property (right-to-left layout) #213

Context

This change attempts to support bidi layout only for horizontal layout direction, i.e. it doesn't support vertical content such as CJK or Mongolian vertical writing systems.

Feedback wanted

Should inset, margin, padding, and border Rects be considered as absolute axis (left means left and right means right) or relative axis (left means layout start, right means layout end)?

Should the RTL conversion happen during the calculations or as a separate phase (i.e. calculate as if LTR then flip the horizontal axis)?

General code review is also wanted to be more aligned with the rest of taffy's code :)

nicoburns · 2024-11-07T03:07:43Z

To answer your questions:

Should inset, margin, padding, and border Rects be considered as absolute axis (left means left and right means right) or relative axis (left means layout start, right means layout end)?

left should mean left, etc.

Should the RTL conversion happen during the calculations or as a separate phase (i.e. calculate as if LTR then flip the horizontal axis)?

My intuition on this is that it should happen during the calculations. But I would be open to being persuaded otherwise. As long as whichever implementation we choose is able to pass all the relevant tests and match other browsers I think I'll be happy.

Will do a proper review later.

nicoburns

@tjamaan Actual direction changes look good to me. But we'll want to hook this up to our testing infrastructure to verify that. The process for that is something like:

Add support for the direction property to our gentest script
- Add support for reading it to scripts/gentest/test_helper.js
- Add support for generating to scripts/gentest/main.rs
Setup the gentest script to generate every test with both ltr and rtl as the default.
Write some new tests to test mixed direction.

I've also formatted main using the latest nightly, and I've also removed .cargo/config from our repo. So if you rebase on latest main that should get rid of a bunch of unrelated changes from the diff.

nicoburns · 2024-11-07T02:16:45Z

+    /// TODO: documentation
+    pub direction: Direction,


Am I correct in thinking that this isn't actually used? If so, it should probably be removed. Removing the direction field here and the direction function parameter from the traits would greatly reduce the size of the diff for this PR which would be nice!

nicoburns · 2024-11-07T02:21:11Z

+    match direction {
+        Direction::Rtl => {
+            justify_content.flip();
+            justify_items.as_mut().map(|x| x.flip());
+        }
+        _ => (),
+    }


Maybe use if direction.is_rtl() here?

nicoburns · 2025-03-18T22:52:03Z

@tjamaan Are you intending to finish this feature or should I mark this as open for adoption?

One thing that has changed recently is that there is less need for writing custom tests as we are now able to run the WPT tests against Taffy using Blitz (cargo run -p wpt css/css-flexbox css/css-grid from the Blitz repo - you can update the Taffy dependency to be a local path dependency). Unfortunately this PR as-is isn't currently enabling any extra WPT test passes relative to Taffy main.

kane50613 · 2025-12-27T07:35:50Z

hey @nicoburns I'd like to adopt this PR! Should I fork the repo and apply these commits or continue on this branch

nicoburns · 2025-12-27T13:03:16Z

@kane50613 That's great! I think you'll need to fork and create you're own branch, as I don't think github will let you push tobthis one.

@tjamaan

diff is adpoted from DioxusLabs#736 originally written by @tjamaan

@tjamaan

diff is adopted from DioxusLabs#736 originally written by @tjamaan

@tjamaan

diff is adopted from #736 originally written by @tjamaan

@tjamaan

diff is adopted from #736 originally written by @tjamaan

@tjamaan

diff is adopted from DioxusLabs#736 originally written by @tjamaan

@tjamaan

diff is adopted from DioxusLabs#736 originally written by @tjamaan add grid & flex test fixtures add block layout & inherited fixtures, remove unused `flip` function better `direction` field comments for consistency merge `alignment_based_offset` match cases remove newline Fix double application of inset Add edge helpers to ContentSlot Fixup x/y positioning of block children This fixes errors introduced when resolving merge conflicts when rebasing the floats PR on top of the direction PR. Fix build when block_layout is enabled bu float_layout isn't Signed-off-by: Nico Burns <nico@nicoburns.com> Fix build when no default features are enabled Signed-off-by: Nico Burns <nico@nicoburns.com> remove redundant `direction` prop from layout inputs update test helper to get direction from computed style Account for the possibility of negative free space Don't account for margins when computing slot width Don't add scrollbar_width to RTL x position of flex items The scrollbar of items is within their width. correct RTL grid placement cargo fmt Signed-off-by: Nico Burns <nico@nicoburns.com> Create rtl variants of all tests Signed-off-by: Nico Burns <nico@nicoburns.com> fix fix `TrackCounts` use add `AlignContent::reversed`, avoid using `ContentSlot` without `float_layout` guard remove `scrollbar_size` redeclartion simplify changes simplify `rtl_column_occupancy_index_for_initialization` params reduce diff cargo fmt simplify flexbox rtl offset math fix `round` on negative value README: add slint (DioxusLabs#918)

@tjamaan

* implement `direction` property diff is adopted from #736 originally written by @tjamaan add grid & flex test fixtures add block layout & inherited fixtures, remove unused `flip` function better `direction` field comments for consistency merge `alignment_based_offset` match cases remove newline Fix double application of inset Add edge helpers to ContentSlot Fixup x/y positioning of block children This fixes errors introduced when resolving merge conflicts when rebasing the floats PR on top of the direction PR. Fix build when block_layout is enabled bu float_layout isn't Signed-off-by: Nico Burns <nico@nicoburns.com> Fix build when no default features are enabled Signed-off-by: Nico Burns <nico@nicoburns.com> remove redundant `direction` prop from layout inputs update test helper to get direction from computed style Account for the possibility of negative free space Don't account for margins when computing slot width Don't add scrollbar_width to RTL x position of flex items The scrollbar of items is within their width. correct RTL grid placement cargo fmt Signed-off-by: Nico Burns <nico@nicoburns.com> Create rtl variants of all tests Signed-off-by: Nico Burns <nico@nicoburns.com> fix fix `TrackCounts` use add `AlignContent::reversed`, avoid using `ContentSlot` without `float_layout` guard remove `scrollbar_size` redeclartion simplify changes simplify `rtl_column_occupancy_index_for_initialization` params reduce diff cargo fmt simplify flexbox rtl offset math fix `round` on negative value README: add slint (#918) * Hide debug output in tests * Disable rounding for some tests * Update relayout_is_stable_with_rounding tests to new "round_ties_up" rounding strategy --------- Co-authored-by: Nico Burns <nico@nicoburns.com>

nicoburns · 2026-03-17T20:52:19Z

Superceded by #906

tjamaan added 6 commits October 15, 2024 10:56

implementdirection property and apply to grid layout

f2fbe32

grid direction implementation

acee86c

flexbox (1)

75dcf04

wip flexbox

770e61e

Merge branch 'DioxusLabs:main' into tj-direction

78507b0

remove println

ed28670

nicoburns requested changes Nov 10, 2024

View reviewed changes

nicoburns mentioned this pull request Dec 4, 2024

Support direction property (right-to-left layout) #213

Closed

5 tasks

alice-i-cecile added the enhancement New feature or request label Dec 24, 2024

nicoburns added the adopt me The author has vanished or is too busy; feel free to create a new PR with the changes! label Dec 8, 2025

kane50613 added a commit to kane50613/taffy that referenced this pull request Dec 27, 2025

implement direction property

9dfc641

diff is adpoted from DioxusLabs#736 originally written by @tjamaan

kane50613 added a commit to kane50613/taffy that referenced this pull request Dec 27, 2025

implement direction property

5c9923c

diff is adopted from DioxusLabs#736 originally written by @tjamaan

kane50613 mentioned this pull request Dec 27, 2025

Implement direction property #906

Merged

nicoburns pushed a commit that referenced this pull request Jan 5, 2026

implement direction property

e7c0190

diff is adopted from #736 originally written by @tjamaan

nicoburns pushed a commit that referenced this pull request Jan 25, 2026

implement direction property

230ab93

diff is adopted from #736 originally written by @tjamaan

kane50613 added a commit to kane50613/taffy that referenced this pull request Feb 13, 2026

implement direction property

d3cb5f6

diff is adopted from DioxusLabs#736 originally written by @tjamaan

nicoburns closed this Mar 17, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bi-directional layout support#736

Bi-directional layout support#736
tjamaan wants to merge 6 commits intoDioxusLabs:mainfrom
tjamaan:tj-direction

tjamaan commented Nov 6, 2024 •

edited by nicoburns

Loading

Uh oh!

nicoburns commented Nov 7, 2024

Uh oh!

nicoburns left a comment

Uh oh!

nicoburns Nov 7, 2024

Uh oh!

nicoburns Nov 7, 2024

Uh oh!

nicoburns commented Mar 18, 2025

Uh oh!

kane50613 commented Dec 27, 2025

Uh oh!

nicoburns commented Dec 27, 2025

Uh oh!

nicoburns commented Mar 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

tjamaan commented Nov 6, 2024 • edited by nicoburns Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Objective

Context

Feedback wanted

Uh oh!

nicoburns commented Nov 7, 2024

Uh oh!

nicoburns left a comment

Choose a reason for hiding this comment

Uh oh!

nicoburns Nov 7, 2024

Choose a reason for hiding this comment

Uh oh!

nicoburns Nov 7, 2024

Choose a reason for hiding this comment

Uh oh!

nicoburns commented Mar 18, 2025

Uh oh!

kane50613 commented Dec 27, 2025

Uh oh!

nicoburns commented Dec 27, 2025

Uh oh!

nicoburns commented Mar 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tjamaan commented Nov 6, 2024 •

edited by nicoburns

Loading