-
Notifications
You must be signed in to change notification settings - Fork 29
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Upstream "algo container" styles to W3C stylesheet? #338
Comments
No objection from me but I sent an email to spec-prod just in case others have comments. |
Looks good to me. |
Respec uses .algorithm, so I wonder if we can make it work with that too? |
(Alternatively, Respec could recursively add data-algorithm to ol.algorithm… but be nice if it just works… in any case, please check that there isn’t going to be any style class with Respec specs) |
I can have bikeshed output a class=algorithm, that makes sense to me. (The |
Ok, cool. We can then rip out whatever Respec is adding for algorithms for custom style. Just needs a little coordination, but should be trivial and quick to do. |
@deniak , looks like we should be going with: .algorithm:not(.heading) {
padding: .5em;
border: thin solid #ddd; border-radius: .5em;
margin: .5em calc(-0.5em - 1px);
}
.algorithm:not(.heading) > :first-child {
margin-top: 0;
}
.algorithm:not(.heading) > :last-child {
margin-bottom: 0;
}
.algorithm .algorithm {
margin: 1em 0;
} |
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:
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 thedata-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
The text was updated successfully, but these errors were encountered: