Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update the html lang attribute #967

Closed
jmsche opened this issue Sep 1, 2023 · 3 comments · Fixed by #1035
Closed

Update the html lang attribute #967

jmsche opened this issue Sep 1, 2023 · 3 comments · Fixed by #1035

Comments

@jmsche
Copy link

jmsche commented Sep 1, 2023

Hi,

In an application, I have the lang attribute set on the <html> tag.
When the user switches the locale, the body is changed with Turbo.
However, the lang attribute is not updated by Turbo, and some of my JavaScript relies on this attribute to use the correct locale.

I know that I could either add an event listener listening to a Turbo event to update the attribute, or trigger a full page refresh instead.

Would it make sense for Turbo to also update the lang attribute by default instead of adding custom logic?
@seanpdoyle
Copy link
Contributor

Turbo should probably monitor changes to the <html> element's [lang] attribute.

Until that support is baked in, applications that drive to pages with different html[lang] attributes should disable Turbo Drive for those mechanisms by annotating those <a> and <form> elements with [data-turbo="false"], or by requesting a full-page reload by including <meta name="turbo-visit-control" content="reload"> in the response.

seanpdoyle added a commit to seanpdoyle/turbo that referenced this issue Oct 12, 2023
@seanpdoyle
Set html[lang] during navigation
1573ae3 
Closes [hotwired#967][]

Change the `<html>` element's `[lang]` attribute during navigation.
Currently, this isn't possible from applications (without a lot of
trouble), since the [turbo:before-render][] event is scoped to the
`newBody`.

In order to support this behavior, change the `PageSnapshot` constructor
to accept an instance of [HTMLHtmlElement][] (the `<html>` element) so
that that element can be accessible from the `PageRenderer`.

[hotwired#967]: hotwired#967
[turbo:before-render]: https://turbo.hotwired.dev/reference/events
[HTMLHtmlElement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLHtmlElement
@seanpdoyle seanpdoyle mentioned this issue Oct 12, 2023
Merged
@seanpdoyle
Copy link
Contributor

I've opened #1035 to implement this behavior.

@sedubois
Copy link
Contributor

I came here after encountering this exact issue: the document's lang attribute stays stuck in the previous language when switching language. So for example this kind of CSS doesn't work until the page is reloaded: html[lang="fr"] q { quotes: "« " " »"; }.

Thank you so much @seanpdoyle for the PR.

afcapel pushed a commit that referenced this issue Oct 23, 2023
@seanpdoyle
Set html[lang] during navigation (#1035)
e087856 
Closes [#967][]

Change the `<html>` element's `[lang]` attribute during navigation.
Currently, this isn't possible from applications (without a lot of
trouble), since the [turbo:before-render][] event is scoped to the
`newBody`.

In order to support this behavior, change the `PageSnapshot` constructor
to accept an instance of [HTMLHtmlElement][] (the `<html>` element) so
that that element can be accessible from the `PageRenderer`.

[#967]: #967
[turbo:before-render]: https://turbo.hotwired.dev/reference/events
[HTMLHtmlElement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLHtmlElement
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Set html[lang] during navigation seanpdoyle/turbo
3 participants
@seanpdoyle @jmsche @sedubois