Create new float styles.


Guise needs a style to float an element—a convenience for the old-fashioned CSS float property. It will use the CSS classes float-start and float-end. (Compare the side positions from CSS writing modes spec, used in for box flaps.)

Moreover the size of the floats should be restricted using the logical sizes implemented from GUISE-18, although as maximum rather than exact settings. Here are their default values as in and (re)defined in GUISE-98.

  • max-size-marginal: 11%

  • max-size-subordinate: 22%

  • max-size-significant: 33%

  • max-size-partial: 50%

  • max-size-substantial: 66%

  • max-size-full: 100%




Garret Wilson
December 22, 2019, 2:33 PM

This is really not an easy decision to make.

To justify float-start and float-end, one could imagine them as attributes rather than "things". Every "thing" might have a "float" attribute, and this is setting it to start or end. In that view, even none (that is, float-none) would be an appropriate value. But that is more style than substantive, you might say.

This does seem to be an analogue to a box lid flap. So maybe that would indicate floater with e.g. a side-inline-start.

Probably not enough information is available to know the best choice yet. I suppose we have to just pick one and go forward. For now float-start and float-end are short and very similar to what the other frameworks use. And they will be easy to update in a search and replace operation—probably easier than separate tokens. So while we wait and see, pragmatically float-start and float-end are the best choice for the immediate term—but just barely.

Garret Wilson
December 15, 2019, 6:02 PM

There is a potential drawback with these new, simplified terms: what if in the future we want to use more complicated "floating", such as floating to the top or center?

In that case we'd probably want to create a separate "thing" altogether—perhaps called a "pull" from "pull quote" (and from Bulma's is-pulled-*). These would probably use CSS regions and CSS exclusions, which are set to make text flowing around regions much more powerful.

It is important to note that CSS exclusions are not floats; see CSS exclusions with Queen Bey. See also Exclusions will hopefully be like more powerful grid-friendly floats.

Interestingly the concept of a "float" in LaTeX is distinct from text wrapping; see LaTeX/Floats, Figures and Captions: Wrapping text around figures.

So pragmatically it's probably simplest to continue to refer to a "float" as the CSS thing, with special behavior and even quirks, and leave the definition of some general floating/wrapping thing to the future as some other "thing". Thus we can stick with float-start and float-end. How we break out defining other floating/wrapping things in the future will be determined then, but it will likely be more complex and able to be configured with more permutations.

Nevertheless let's stick with more of a substantive view of floats ("it is a float") rather than a style-oriented view ("it floats"), so don't implement float-none.

Garret Wilson
December 15, 2019, 4:39 PM

set the exact size of box flaps using classes such as size-subordinate. But for floats the legacy GlobalMentor pub layout styles specified maximum dimensions, so that e.g. a table or a picture would not make the float larger than it needs to be. So we should probably specify max-size-subordinate instead.

Thus taking into account the new float formulation, here is the revised conversion cheat sheet for the legacy GlobalMentor pub layout styles:

  • near: float-start

  • far: float-end

  • near side: float-start max-size-subordinate

  • far side: float-end max-size-subordinate

  • near third: float-start max-size-significant

  • far third: float-end max-size-significant

  • near half: float-start max-size-partial

  • far half: float-end max-size-partial

That's probably much easier to use.

Garret Wilson
December 15, 2019, 4:28 PM

Let's revisit the naming convention, as float side-inline-start seems a bit verbose. Here are what the other frameworks use:

  • Bulma: is-pulled-left and is-pulled-right

  • Foundation: float-left and float-right

  • Bootstrap: float-left, float-right, and float-none

These are obviously easier to use than float side-inline-start. And Bootstrap even adds a float-none option, indicating that "float" can be viewed as a property that can be disabled.

On the other hand "left" and "right" are old-school and not very i18n friendly. Foundation even notes:

Float classes don't flip direction in a right-to-left environment—{{left}} always means left, and right always means right.

The W3C Authoring HTML with bidi localization in mind draft, referencing the new text direction specification, says to "[a]void attributes with values of left and right" and says to instead "[use] start and end instead of right and left".

Seeing that "float" implicitly indicates a "line" axis, let's go with float-start and float-end (allowing us to determine left vs. right in the stylesheet based upon writing direction), with float-none thrown in for good measure.

Garret Wilson
October 10, 2019, 3:14 PM

Here is a conversion cheat sheet for the legacy GlobalMentor pub layout styles:

  • near: float side-inline-start

  • far: float side-inline-end

  • near side: float side-inline-start size-subordinate

  • far side: float side-inline-end size-subordinate

  • near third: float side-inline-start size-significant

  • far third: float side-inline-end size-significant

  • near half: float side-inline-start size-partial

  • far half: float side-inline-end size-partial



Garret Wilson


Garret Wilson




Fix versions