Skip to content

Upstream "algo container" styles to W3C stylesheet? #338

@tabatkins

Description

@tabatkins

In a number of specs, people have been manually copying around a block of style that formats algorithm blocks in a special way. See https://drafts.css-houdini.org/css-typed-om/#unparsedvalue-objects for an example. This seems to be pretty popular, so I'm inclined to build it into Bikeshed's default stylesheet, and think it should be upstreamed to the W3C stylesheet as well.

The CSS is pretty simple:

[data-algorithm]:not(.heading) {
  padding: .5em;
  border: thin solid #ddd; border-radius: .5em;
  margin: .5em calc(-0.5em - 1px);
}
[data-algorithm]:not(.heading) > :first-child {
  margin-top: 0;
}
[data-algorithm]:not(.heading) > :last-child {
  margin-bottom: 0;
}
[data-algorithm] [data-algorithm] {
    margin: 1em 0;
}

It's just a thin gray border, outset so the algorithm text itself lines up with surrounding text. It functions really well in algo-heavy specs as a lightweight but noticeable delimiter of the bounds of an algorithm, especially useful when you have several algos in a row that might otherwise blend together.

(For darkmode I think the naive inverse gray, #333, looks great.)

(The :not(.heading) bits are because Bikeshed can take the data-algorithm attribute on a heading to declare the entire section an algorithm, for the purposes of var-checking. It doesn't need the styling in that case.)

/cc @jyasskin

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions