Skip to content
This repository was archived by the owner on Nov 6, 2025. It is now read-only.

Direction based on language (ltr, rtl) #295

Open
or-schneider wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Direction based on language (ltr, rtl) #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e27c7ea
Define direction based on language directly in css
or-schneider Jun 6, 2024
e90baf2
Accessible dir prop based on language in the <html>
or-schneider Jun 6, 2024
d1e2db3
Use text direction hook for <html> dir prop
or-schneider Jun 9, 2024
067fc63
Remove root <html> dir prop so layout <html> can set it
or-schneider Jun 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/[locale]/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
@tailwind components;
@tailwind utilities;

:where(:lang(he)) {
direction: rtl;
}
:where(:lang(en)) {
direction: ltr;
}
@layer base {
html {
-webkit-tap-highlight-color: transparent;
Expand Down
7 changes: 5 additions & 2 deletions app/[locale]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import Footer from '@/components/Footer/Footer';
import { HOST } from '@/config/consts';
import { unstable_setRequestLocale } from 'next-intl/server';
import { NextIntlClientProvider, useMessages } from 'next-intl';
import { Locale } from '../i18n';
import useTextDirection from '@/hooks/useTextDirection';

const birzia = Birzia({
src: [
Expand Down Expand Up @@ -60,13 +62,14 @@ export default function RootLayout({
params: { locale },
}: {
children: React.ReactNode;
params: { locale: string };
params: { locale: Locale };
}) {
unstable_setRequestLocale(locale);
const messages = useMessages();

const dir = useTextDirection();
return (
<html lang={locale} dir="rtl" suppressHydrationWarning={true}>
<html lang={locale} dir={dir} suppressHydrationWarning={true}>
<meta charSet="ISO-8859-1" />

<body
Expand Down
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function RootLayout({
params: { locale: string };
}) {
return (
<html lang={locale} dir="rtl">
<html lang={locale}>
<body>{children}</body>
</html>
);
Expand Down