Work Header

WhatsApp group chat skin

Chapter Text

Here are some issues that I’d like to work on in future versions:

  • The header could be more realistic;
  • After much fiddling, timestamp positioning still isn’t quite right – ideally, the baseline of the timestamp should line up with the text of the message in a way that works across platforms (instead of the current compromise, which is slightly off on both PC and mobile); also, the timestamps on images don’t line up with the others;
  • Text spacing/padding is also slightly off, although seems better when the correct fonts are installed;
  • Ideally, it would be nice for onemoji and related classes to be detected automatically, although even if this can be done with CSS I suspect it would require a feature that AO3 doesn’t support.

And here are some features that I initially implemented but had to remove, and which could perhaps be reinstated in the distant future:

  • Optional CSS-driven image blurring (relies on the blur function, not currently supported by AO3);
  • Storage of timestamps in the title attribute and placement in an after pseudoelement, making these invisible when the workskin is turned off (relies on content: attr(title), not currently supported by AO3);
  • Use of CSS grid for the layout of the header (also not supported by AO3, although I replaced this with a table and it looks pretty much the same).

Feel free to build on this work or to suggest improvements in the comments. I am a mere dabbler in CSS and would love to further my experience 😊