RTL is broken

[yarons]

The RTL changes embedded in CSS are no longer reflected for Hebrew and the site appears in LTR completely, what can we do to fix this?

[tdelmas]

I confirm the bug, I think I know where the problem is, let me check

[yarons]

We're experiencing the same phenomena with the new design :( @tdelmas

[yarons]

Aside from changing dir="ltr" to dir="rtl" I made the following changes:

/* le-2025-theme-output.min.a30c2a549b84ddcb3f7ab31d0c9155e9f966a6e218d6294fa9c245ef5d0775f5.css | https://letsencrypt.org/css/le-2025-theme-output.min.a30c2a549b84ddcb3f7ab31d0c9155e9f966a6e218d6294fa9c245ef5d0775f5.css */

.pl-4 {
  /* padding-left: 1rem; */
  padding-right: 1rem;
}

.border-l {
  /* border-left-width: 1px; */
  border-right-width: 1px;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  /* margin-right: calc(.25rem * var(--tw-space-x-reverse)); */
  /* margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse))); */
  margin-left: calc(.25rem * var(--tw-space-x-reverse));
  margin-right: calc(.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.left-0 {
  /* left: 0; */
  right: 0;
}

.post-hero__inner {
  /* text-align: left; */
  text-align: right;
}

Now the docs screen works, we can add those rules as conditionals to dir=rtl.
There are more for the main home page.

[scottmakestech]

Will look into this later this week.On Mar 30, 2025, at 3:30 AM, Yaron Shahrabani ***@***.***> wrote: Aside from changing dir="ltr" to dir="rtl" I made the following changes: /* le-2025-theme-output.min.a30c2a549b84ddcb3f7ab31d0c9155e9f966a6e218d6294fa9c245ef5d0775f5.css | https://letsencrypt.org/css/le-2025-theme-output.min.a30c2a549b84ddcb3f7ab31d0c9155e9f966a6e218d6294fa9c245ef5d0775f5.css */ .pl-4 { /* padding-left: 1rem; */ padding-right: 1rem; } .border-l { /* border-left-width: 1px; */ border-right-width: 1px; } .space-x-1 > :not([hidden]) ~ :not([hidden]) { /* margin-right: calc(.25rem * var(--tw-space-x-reverse)); */ /* margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse))); */ margin-left: calc(.25rem * var(--tw-space-x-reverse)); margin-right: calc(.25rem * calc(1 - var(--tw-space-x-reverse))); } .left-0 { /* left: 0; */ right: 0; } .post-hero__inner { /* text-align: left; */ text-align: right; } Now the docs screen works, we can add those rules as conditionals to dir=rtl. There are more for the main home page.—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were assigned.Message ID: ***@***.***> yarons left a comment (letsencrypt/website#1595) Aside from changing dir="ltr" to dir="rtl" I made the following changes: /* le-2025-theme-output.min.a30c2a549b84ddcb3f7ab31d0c9155e9f966a6e218d6294fa9c245ef5d0775f5.css | https://letsencrypt.org/css/le-2025-theme-output.min.a30c2a549b84ddcb3f7ab31d0c9155e9f966a6e218d6294fa9c245ef5d0775f5.css */ .pl-4 { /* padding-left: 1rem; */ padding-right: 1rem; } .border-l { /* border-left-width: 1px; */ border-right-width: 1px; } .space-x-1 > :not([hidden]) ~ :not([hidden]) { /* margin-right: calc(.25rem * var(--tw-space-x-reverse)); */ /* margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse))); */ margin-left: calc(.25rem * var(--tw-space-x-reverse)); margin-right: calc(.25rem * calc(1 - var(--tw-space-x-reverse))); } .left-0 { /* left: 0; */ right: 0; } .post-hero__inner { /* text-align: left; */ text-align: right; } Now the docs screen works, we can add those rules as conditionals to dir=rtl. There are more for the main home page. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were assigned.Message ID: ***@***.***>