How to set lang attribute on <html> tag in SSR mode with SvetleKit

February 4, 2023

I know user’s preferred language in cookie and I am able to init locales with it (using server hook).
And I would like to also render correct lang attribute which matches selected locale.

>Solution :

There are docs on specifically that.

If your content is available in multiple languages, you should set the lang attribute based on the language of the current page. You can do this with SvelteKit’s handle hook:

src/app.html
<html lang="%lang%">
src/hooks.server.ts
import type { RequestEvent, Handle } from '@sveltejs/kit';
export const handle = (({ event, resolve }) => {
  return resolve(event, {
    transformPageChunk: ({ html }) =>
      html.replace('%lang%', get_lang(event))
  });
}) satisfies Handle;