Kuma: React breaks on certain IDs within the content

[peterbe]

Originally filed on https://github.com/mdn/sprints/issues/2148

Just wanted to point out some rendering issues that are caused by translations (like French language for example) which makes some selectors not valid.
Take a look : https://developer.mozilla.org/fr/docs/Web/CSS/line-height

[peterbe]

Quoting @schalkneethling

Thank you for reporting this @DamChtlv

The problem is because of:

#Utiliser_les_transitions_pour_accentuer_les_éléments_d'un_menu ~ * pre[class*=html]' is not a valid selector

My first guess is that it is the characters such as é and d'u causing the problem

[peterbe]

The reasons this happened is one thing. The more pressing thing is that we didn't have any test automation, that uses a real browser, that checks if pages render correctly.

[peterbe]

Able to reproduce locally:

[schalkneethling]

It looks like it might actually be characters such as ' as an id such as Relzione_tra_length_e_proprietà_numeriche does not break it. Specifically referring to the à character in that string.

https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array

So far I have only found the problem with the fr locale

[peterbe]

I wonder, should the ID have become Relzione_tra_length_e_proprieta_numeriche (instead of Relzione_tra_length_e_proprietà_numeriche) by the Wiki post-processing?

[peterbe]

Yep, @schalkneethling is right. My bad. We just need to make sure the iframes don't have a ' in their ID.
https://codepen.io/peterbe/pen/vYBrOzj?editors=1111

[peterbe]

Sorry, not iframes. These:

<h3 id="Utiliser_les_transitions_pour_accentuer_les_éléments_d'un_menu">Utiliser les transitions pour accentuer les éléments d'un menu</h3>

[SphinxKnight]

Well sorry for the French :)
Rewording the ID could be a workaround
Adding the ' in non_url_safe https://github.com/mozilla/kuma/blob/master/kuma/wiki/content.py#L556 could help as well

[peterbe]

I came to the same conclusion.
Now I'm just curious what we should do to pages that have "already been allowed" to keep the '.

[peterbe]

Well sorry for the French :)

Don't apologize for your beautiful language! It's Kuma who should say sorry.

[SphinxKnight]

what we should do to pages that have "already been allowed" to keep the '

I might have an old crawler of mine that stores the content of ?raw view on files that I could run to detect the pages having such IDs.
Once Kuma would do something differently, a manual save on those pages should be sufficient (they should not be too many)

A drawback is that I have to "choose" which section I want to crawl and I may miss some pages if I don't know the list of sections beforehand.
Another drawback is that it's quite slow to gather all the pages for all the translations for all the sections.

If possible a fallback display in any case would be nice :s

[SphinxKnight]

Could it be possible to reopen this one?
Apparently parenthesis have the same issues: https://developer.mozilla.org/fr/docs/Web/CSS/imagefunction (it now contains #Afficher_une_partie_(sprite))
I reworded the heading on this one to avoid ' but used parenthesis and had the same error

[peterbe]

You're totally right! Back the drawing board on this one.

[SphinxKnight]

An example in English ;) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

[peterbe]

An example in English ;) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

I scraped that URL locally and did reproduce and was able to prove that my PR fixed it.

[SphinxKnight]

I've edited 41 pages of HTML/CSS sections in fr which had a ' (I left line-height alone for now)

[SphinxKnight]

if my regexp is correct https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform is the only other page in en-US acros HTML/CSS/JavaScript sections which has brackets in an EmbedLiveSample macro call

[peterbe]

There is no more work to do on this. I'll close it.