martinthomson / rfc-txt-html

Make an HTML RFC look like a text one
3 stars 2 forks source link

Avoid CSS grid #4

Open larseggert opened 1 year ago

larseggert commented 1 year ago

Is there a way to avoid using CSS grids? Weasyprint, which the datatracker uses to make PDFs, doesn't support that.

martinthomson commented 1 year ago

I am using @supports(display: grid) in the latest version. Does WeasyPrint not support @supports? The fallback doesn't look exactly the same, but it should still print something coherent.

I know that this is not ideal, but I wasn't able to get the presentation right without it. Remember the problem where the authors block spilled down over the title when there were too many authors?

larseggert commented 1 year ago

I don't think @supports is supported: https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#css

martinthomson commented 1 year ago

Yuck. This is really needed to do any sort of switch-hitting when features aren't supported. All the browsers do fine with this, and have done for ages.

larseggert commented 1 year ago

I'm trying to work around it by using @media print instead of checking for grid support. That will of course then mean that when using native browser printing, the grid won't be used either.

larseggert commented 1 year ago

But with little success. This is what I have now:

/* #identifiers styling for when grid layout is supported, or not */
@media screen {
/* @supports(display: grid) { */
  #identifiers {
    display: grid;
    grid-template-columns: 47ch 24ch;
    grid-auto-rows: auto;
    gap: 0 1ch;
  }
  #identifiers dd {
    grid-column: 1;
  }
  #identifiers dd.authors {
    grid-area: 1 / 2 / 100 / 3;
    width: 24ch;
    text-align: right;
    display: block;
  }
}
@media print {
/* @supports not (display: grid) { */
  /* is this being used? */
  * { color: red !important; }
  #identifiers dd.authors {
    padding-left: 8ch;
    width: 64ch;
  }
  #identifiers dd.authors::before {
    content: "Authors:";
    margin: 0 0 0 -8ch;
  }
  #identifiers dd.authors .author {
    display: inline-block;
    margin: 0 2ch 0 1ch;
  }
  #identifiers dd.authors .author:last-of-type {
    margin-right: 0;
  }
}

It's all red, so the print styles are used, but the layout is still broken:

Screenshot 2022-12-15 at 12 27 50
martinthomson commented 1 year ago

That's the layout I would expect to see WeasyPrint produce here. The grid layout really is needed to get the authors shown down the right-hand side of the page as you might want.

If you leave the @supports in, but change it so that the "not" variant isn't in its own @supports block, would that be better? We can reorder so that the @supports overrides the baseline rules as needed. It's worse (you need more overrides), but it might at least produce something coherent for WeasyPrint to consume.

larseggert commented 1 year ago

Ah. I thought the non-grid variant would do the layout down the right side - didn't your original pre-grid CSS do that?

martinthomson commented 1 year ago

It did, but not reliably. I had to force the header to be a fixed size, which doesn't work for both one author and 20 authors. One author gets lots of extra whitespace; 20 authors overflow over the title and down the page.

martinthomson commented 1 year ago

https://github.com/martinthomson/rfc-txt-html/commit/781a0373ae4a3d38de9eef68cd14655f901f394a contains the haxx that should make WeasyPrint output less awful.