Page MenuHomePhabricator

[EPIC] Systematic solution on preventing rendering issues on user styles between dark/light themes
Open, Needs TriagePublic

Description

Context

Currently we have a lot of tasks in our backlog in order to fix inconsistencies between dark/light themes in mobileapps.
The issue here is that user submitted styles in templates doesn't always render correctly between different themes when using iOS/Android apps that consume the mobileapps API.
Our current strategy of fixing edge cases one by one

  • is not sustainable
  • takes time
  • builts up dept on mobileapps codebase because we fix issues cases by case
  • causes frustration in the users because of the time it takes to have a working rendering on apps

It would be a good way forward to think of a more systematic approach on how to deal with this. Some ideas already discussed are:

  • Introduced styling linting (probably on parsoid)
  • Test article changes readability as a background task
  • Use accessibility standards to check if rendering is OK between themes
  • Enable users to see the changes they do on apps (as a preview)
  • Add editors in the loop by introducing some sort of notification if rendering doesn't work

These are all rough ideas that we can be a good start to tackle the bigger issue.

Acceptance criteria
  • Enable users to fix rendering issues introduced by user styling
  • Reduce rendering inconsistencies introduced by user styling

Event Timeline

MSantos renamed this task from Systematic solution on preventing rendering issues on user styles between dark/light themes to [EPIC] Systematic solution on preventing rendering issues on user styles between dark/light themes.Sep 7 2021, 1:56 PM
MSantos moved this task from Backlog to Epics on the Page Content Service board.

Hey @MSantos, again not to oversimplify but wanted to circle back to one approach one more time please just to make sure it’s indeed not possible as it seems to me like a feasible approach .

Totally understand all the templates have different elements/setups, but is there really no way to parse the color gradient of the background regardless of what template it’s in and simply assign text color automatically as a secondary step (or if it’s detected that there’s a color-conflict override what’s there)

2 Examples:

https://en.wikipedia.org/api/rest_v1/page/mobile-html/The_West_Wing_(season_7)?theme=dark

^the headers for the episode guide tables have black background so it will render text white instead of black on black

https://en.wikipedia.org/api/rest_v1/page/mobile-html/The_Mars_Volta_discography?theme=dark

^the fop table has a very light sky blue hence the text color should render black and not white once it detects the conflict

Perhaps it might not be 100% at first but at least conceptually to me, if you split the entire gradient of colors, you basically can have white or dark text work for the great majority of backgrounds

This may deserve another separate ticket, but I see a bunch of articles where they have legend-dictated shading for the tables yet in dark mode it doesn’t carry over

Here’s one example; https://en.m.wikipedia.org/wiki/List_of_Oklahoma_Sooners_head_football_coaches

Note that this is just one example, but it’s a much more pervasive issue across many template rules.

Would this be unbrellad with the other dark issues or can we file a seperate ticket for it if another one doesn’t exist already for it please? @MSantos @vadim-kovalenko