Setting the page direction to "rtl" #139

yazer79 · 2023-08-17T10:33:33Z

yazer79
Aug 17, 2023

What is the best way to set the page text direction depending on the locale, i.e 'ar' -> RTL, with css or script? I tried to find it in examples or docs but couldn't

alancwoo · 2024-01-01T15:07:54Z

alancwoo
Jan 1, 2024

I'm new to Svelte, so not sure if this is the best solution, but I'm essentially working with the Locale Router, so I have routes set up like /src/routes/[lang]/...

What I did was:

Set <html lang="%lang%" dir="%dir%"> in /src/app.html
Created a JSON file /src/lib/translations/direction.json which includes the code and corresponding lang/direction, for example:

{
	"en": "ltr",
	"ar": "rtl"
}

In /src/hooks.server.js:

import direction from '$lib/translations/direction.json';
...
	// Get direction
	let dir = 'ltr'; // Set to your default locale direction
	if (direction.hasOwnProperty(locale)) dir = direction[locale];

	// Add html `lang` attribute
	return resolve(
		{ ...event, locals: { lang: locale } },
		{
			transformPageChunk: ({ html }) =>
				html.replace(/<html.*>/, `<html lang="${locale}" dir="${dir}">`)
		}
	);

In my root /src/routes/+layout.svelte, watch for changes and set the dir accordingly

<script>
	import '../app.css';

	import direction from '$lib/translations/direction.json';
	import { navigating } from '$app/stores';

	$: if ($navigating) {
		if ($navigating.from?.params.lang !== $navigating.to?.params.lang) {
                         document.documentElement.setAttribute('lang', $navigating.to.params.lang);
			document.documentElement.setAttribute('dir', direction[$navigating.to.params.lang]);
		}
	}
</script>

<slot />

It feels messy to me, like there should be a better 'svelte' way to do this, but it's what I've come up with in the meantime. I was wondering if one could do something with actions, or <svelte:document>, but figure since it's essentially a single sitewide toggle, having it watched in the root layout is fine?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Setting the page direction to "rtl" #139

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Setting the page direction to "rtl" #139

Uh oh!

yazer79 Aug 17, 2023

Replies: 1 comment

Uh oh!

Uh oh!

alancwoo Jan 1, 2024

yazer79
Aug 17, 2023

alancwoo
Jan 1, 2024