Skip to content
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

Open
tabatkins opened this issue Sep 25, 2023 · 8 comments · May be fixed by #345
Open

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

tabatkins opened this issue Sep 25, 2023 · 8 comments · May be fixed by #345

Comments

@tabatkins
Copy link
Member

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

@deniak
Copy link
Member

deniak commented Oct 6, 2023

The proposed addition looks fine to me.
@plehegar @fantasai, any objection to add this?

@plehegar
Copy link
Member

plehegar commented Oct 6, 2023

No objection from me but I sent an email to spec-prod just in case others have comments.

@svgeesus
Copy link

svgeesus commented Oct 6, 2023

Looks good to me.

@marcoscaceres
Copy link
Member

marcoscaceres commented Oct 7, 2023

Respec uses .algorithm, so I wonder if we can make it work with that too?

@marcoscaceres
Copy link
Member

(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)

@tabatkins
Copy link
Member Author

I can have bikeshed output a class=algorithm, that makes sense to me. (The data-algorithm attribute is just used for internal purposes currently and wouldn't have to be output if not for the styling use, but I'll be adding more structure soon.)

@marcoscaceres
Copy link
Member

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.

@plehegar
Copy link
Member

@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;
}

@deniak deniak linked a pull request Oct 10, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants