v0.3.7

Fixes

• Fix: Make padding and border floor node sizes (#372)
• Fix: Prevent percentages contributing to min-content sizes (#388) (also fixes bevyengine/bevy#8017)

v0.3.6

Fixes

• Fix: Ignore align_content when flex_wrap is set to nowrap (#383)

v0.3.5

Fixes

• Fix display: none when it is set on a flexbox child (#380)
• Fix display: none when it is set on a grid child (#381)

v0.3.4

Fixes

• Fix display: none when it is set for the only node in the hierarchy (#377)

v0.3.3

Added

• Added enable_rounding and disable_rounding methods to the Taffy struct which enable consumers of Taffy to obtain unrounded f32 values for the computed layouts if they want them. Rounding remains enabled by default.

Fixes

• Fixed rounding algorithm such that it never leaves gaps between adjacent nodes (#369)
• Fixed compiling with the grid feature disabled (#370)
• Fixed compiling with the std feature disabled

v0.3.2

Fixes

• Allow partial nested values to be deserialized into a Style using the serde feature.

v0.3.1

A small bugfix for the 0.3.0 release

Fixes

• The serde feature now works when the grid feature is enabled

v0.3.0 "CSS Grid"

Highlights

• CSS Grid algorithm support
• Style helper functions

See below for details of breaking changes.

New Feature: CSS Grid

We very excited to report that we now have support for CSS Grid layout. This is in addition to the existing Flexbox layout support, and the two modes interoperate. You can set a node to use Grid layout by setting the display property to Display::Grid.

Learning Resources

Taffy implements the CSS Grid specification faithfully, so documentation designed for the web should translate cleanly to Taffy's implementation. If you are interested in learning how to use CSS Grid, we would recommend the following resources:

• CSS Grid Garden. This is an interactive tutorial/game that allows you to learn the essential parts of CSS Grid in a fun engaging way.
• A Complete Guide To CSS Grid by CSS Tricks. This is detailed guide with illustrations and comphrehensive written explanation of the different Grid propertie and how they work.

Supported Features & Properties

In addition to the usual sizing/spacing proerties (size, min_size, padding, margin, etc), the following Grid style properties are supported on Grid Containers:

Property	Explanation
grid-template-columns	The track sizing functions of the grid's explicit columns
grid-template-rows	The track sizing functions of the grid's explicit rows
grid-auto-rows	Track sizing functions for the grid's implicitly generated rows
grid-auto-columns	Track sizing functions for the grid's implicitly generated columns
grid-auto-flow	Whether auto-placed items are placed row-wise or column-wise. And sparsely or densely.
gap	The size of the vertical and horizontal gaps between grid rows/columns
align-content	Align grid tracks within the container in the inline (horizontal) axis
justify-content	Align grid tracks within the container in the block (vertical) axis
align-items	Align the child items within their grid areas in the inline (horizontal) axis
justify-items	Align the child items within their grid areas in the block (vertical) axis

And the following Grid style properties are supported on Grid Items (children):

Property	Explanation
grid-row	The (row) grid line the item starts at (or a span)
grid-column	The (column) grid line the item end at (or a span)
align-self	Align the item within it's grid area in the inline (horizontal) axis. Overrides align-items.
justify-self	Align the item within it's grid area in the block (vertical) axis. Overrides justify-items.

The following properties and features are not currently supported:

• Subgrids
• Masonry grid layout
• Named grid lines
• Named areas: grid-template-areas and grid-area
• grid-template or grid shorthand

Example

See examples/grid_holy_grail.rs for an example using Taffy to implement the so-called Holy Grail Layout. If you want to run this example, the don't forget the enable the CSS Grid cargo feature:

cargo run --example grid_holy_grail --features grid

New Feature: Style Helpers

Ten new helper functions have added to the taffy prelude. These helper functions have short, intuitive names, and have generic return types which allow them to magically return the correct type depending on context. They make defining styles much easier, and means you won't typically need to use types like Dimension or TrackSizingFunction directly.

For example, instead of:

let size : Size<Dimension> = Size { width: Dimension::Points(100.0), height: Dimension::Percent(50.0) };

you can now write

let size : Size<Dimension> = Size { width: points(100.0), height: percent(50.0) };

And that same helper function will work other types like LengthPercentage and MinTrackSizingFunction that also have a Points variant. There are also generic impl's for Size<T>, Rect<T> and Line<T> which means if your node is the same size in all dimensions you can even write

let size : Size<Dimension> = points(100.0);

Available style helpers:

Type(s)	Helpers that work with that type
LengthPercentage	zero()	Generates a Points variant with the value 0.0
	points(val: f32)	Generates a Points variant with the specified value
	percent(val: f32)	Generates a Percent variant with the specified value. Note that the scale of 0-1 not 0-100.
LengthPercentageAuto Dimension	All helpers from LengthPercentage and...
	auto()	Generates an Auto variant
MinTrackSizingFunction	All helpers from LengthPercentageAuto/Dimension and...
	min_content()	Generates an MinContent variant
	max_content()	Generates an MinContent variant
MaxTrackSizingFunction	All helpers from MinTrackSizingFunction and...
	fit_content(limit: LengthPercentage)	Generates a FitContent variant with the specified limit. Nest the points or percent helper inside this function to specified the limit.
	fr(fraction: f32)	Generates a Fraction (fr) variant with the specified flex fraction
NonRepeatingTrackSizingFunction	All helpers from MaxTrackSizingFunction and...
	minmax(min: MinTrackSizingFunction, max: MaxTrackSizingFunction)	Equivalent to CSS minmax() function.
	flex(fraction: f32)	Equivalent to CSS minmax(0px, 1fr). This is likely what you want if you want evenly sized rows/columns.
TrackSizingFunction	All helpers from NonRepeatingTrackSizingFunction and...
	repeat(rep: GridTrackRepetition, tracks: Vec<TrackSizingFunction>)	Equivalent to css repeat() function.
Vec<TrackSizingFunction>	evenly_sized_tracks(count: u16)	Equivalent to CSS repeat(count, minmax(0px, 1fr)
AvailableSpace	auto()	Generates an Auto variant
	min_conte...

0.2.2

0.2.2

Fixes

• Border or padding on the horizontal axis could, in some cases, increase the height of nodes.

0.2.1

0.2.1

Fixes

• In case of conflicts, min_size now overrides max_size which overrides size (#261). This is the behaviour specified in the CSS specification, and was also the behaviour in Taffy v0.1.0, but a regression was introduced in Taffy v0.2.0.
• taffy::compute_layout has been made public allowing Taffy to be used with custom storage (#263)