w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.46k stars 657 forks source link

[css-tables][css-overflow-5][css-display-4] Allow to change content of repeated table headings #10493

Open shaylinko30 opened 3 months ago

shaylinko30 commented 3 months ago

I was directed to this repo in order to make a request for an nth fragment selector.

The problem I am trying to solve is to be able to select and update the CSS of tables split across PDF pages. For example, I would like the table thead on the first PDF page to say 'Reviews' and the table thead on the following PDF pages to say 'Reviews continued'.

I thought I might be able to use the :not(:first-child) selector so that every table thead not on the first page would have the text 'Reviews continued'. But it seems that the tables on the subsequent pages are fragments, not children.

I would like to request an nth fragment css selector if appropriate.

johannesodland commented 3 months ago

There’s a draft of an ::nth-fragment() pseudo-element selector in css-overflow-5 (https://drafts.csswg.org/css-overflow-5/#fragment-pseudo-element).

I asked for the same thing, and found out that it was already in a spec :)

https://github.com/w3c/csswg-drafts/issues/7517

Only properties that apply to ::first-letter will have an effect when ::nth-fragment() is used as part the selector other than as a subject. As a result, it won’t be straightforward to change the text, but you can change font-properties or opacity.

SebastianZ commented 3 months ago

The use case here seems to be different to the one outlined in #7517. It asks for a way to alter the contents of the <thead> element, which is duplicated on individual pages, not to style individual fragments of the table differently.

I'm not sure whether the duplication of the <thead> is currently magic or there is already a way to control that.

Though I assume a new pseudo-element targetting duplicated table headers that allows to change the text using the content property might make sense for that case.

Sebastian

shaylinko30 commented 3 months ago

Thank you, I didn't search the closed issues or see the draft, apologies.

I have tried to find a way to control the <thead>s that are duplicated, but I have only been able to find solutions that require specific packages and javascript. Unfortunately for me, I only have access to CSS when rendering the PDF.

I have had a difficult time finding information about duplicated <thead>s. It was suggested to me that the problem could be solved with an nth fragment selector, but from what you wrote @SebastianZ are the duplicated<thead>s not fragments?

Should I update this issue to request a new pseudo-element (or pseudo-class?) to target duplicated table elements?

SebastianZ commented 3 months ago

I'm not sure whether the duplication of the <thead> is currently magic or there is already a way to control that.

I have had a difficult time finding information about duplicated <thead>s.

The answer lies in the definition of the table-header-group value for display in the CSS 2 spec.:

Print user agents may repeat header rows on each page spanned by a table.

It was suggested to me that the problem could be solved with an nth fragment selector, but from what you wrote @SebastianZ are the duplicated<thead>s not fragments?

Fragments are defined as parts of a box in relation to overflow. The duplicated <thead>s don't fall under that definition as they are content duplications and not parts of an element. Though the specs currently don't seem to have a more detailed definition of those duplicated contents as the one I quoted above. Though it looks like issue 20 in the Overflow 5 Module is asking for a clarification on that.

Though the spec. also currently says this:

Styling an ::nth-fragment() pseudo-element with the content property has no effect; the computed value of content for the fragment box remains the same as the computed value of content for the element.

So I see two options to cover the use case of changing the contents of <thead> elements for each page:

  1. Define that the repeated header rows are (duplicated) fragment boxes. That would allow to target them via ::nth-fragment(). At the same time, relax the definition of ::nth-fragment() so that content has an effect in this case.
  2. Create a new pseudo-element specifically for this use case. The syntax of that element would be An+B, like for ::nth-fragment() to target the nth duplicate.

Sebastian

SebastianZ commented 3 months ago

Should I update this issue to request a new pseudo-element (or pseudo-class?) to target duplicated table elements?

I've done that for you. I've described the use case instead focusing on the syntax to avoid any early restrictions in discussions.

Sebastian

SebastianZ commented 3 months ago

@frivoal @FremyCompany @tabatkins @fantasai Maybe you could provide some input here as the authors of the related specs.

Sebastian

FremyCompany commented 2 months ago

While this seems valuable, I think there is a lack of interop to enable this type of use case as of now.

Is there interest from any vendor to explore this at the moment? @bfgeek @emilio @fantasai