string-set CSS property is not recognized by browser

Question

I am working on a html to PDF project. I am following the solution from an older SO question, but got stuck on the first step which is:

h1 {
    string-set: doctitle content();
}

@page {
    size: A4;
    margin: 1.6cm .6cm 1.2cm .6cm;

    @top-center {
        content: string(doctitle);
    }
}

but I'm getting a "Unknown property name" on the Dev tools.

Tried on: Chrome version 81.0.4044.129 & Firefox 75.0

https://stackoverflow.com/questions/11764700/using-css-string-set-property-and-content-method — Paulie_D, May 05 '20 at 10:31
I don't think `set-string` is a valid CSS prop, do you need to add a pre-processor tag of some sort? — DBS, May 05 '20 at 10:34
I don't think that's my problem. My problem is that `string-set` is not recognized by the browser. — Mysterywood, May 05 '20 at 10:37
Pulled [this](https://www.w3.org/TR/css-gcpm-3/#setting-named-strings-the-string-set-pro) form W3, so it should be a CSS prop? Unless it has been deprecated somewhere along the lines, but I'm not sure where to look for that information — Mysterywood, May 05 '20 at 10:42

score 2 · Accepted Answer · answered May 06 '20 at 05:14

So after researching a ton more, I think I have the answers. string-set is an actual CSS property in W3's CSS Page Media Module but like the OP in Has the paged media module been abandoned?, there does not seem to be a full adoption in browsers for paged media module specs even though caniuse says it's fully supported.

The reason it works in Re-displaying the current heading after a page break is because the OP uses WeasyPrint, which does not rely on the browser's CSS rendering to create the PDF.

The takeaway is that in 2020, HTML to PDF is still a massive pain because of fragmented adoption of W3's specs. The same HTML file will look different in the browser's print preview, WKHTMLTOPDF and WeasyPrint.

Some of the reading that helped me finally solve this:

string-set CSS property is not recognized by browser

1 Answers1