Skip to content

Fix Arabic RTL flipping Java code blocks and nav bar#97

Merged
brunoborges merged 2 commits intomainfrom
copilot/fix-arabic-flipping-issue
Feb 26, 2026
Merged

Fix Arabic RTL flipping Java code blocks and nav bar#97
brunoborges merged 2 commits intomainfrom
copilot/fix-arabic-flipping-issue

Conversation

Copy link
Contributor

Copilot AI commented Feb 26, 2026 •
edited
Loading

When dir="rtl" is applied to the <html> element for the Arabic locale, the browser flips all content — including Java source code and the navigation bar, both of which must remain LTR regardless of page direction.

Changes

  • site/styles.css — Added [dir="rtl"] overrides at the end of the file:
    • nav and .nav-inner: forced to direction: ltr to preserve layout and control positions
    • pre, code, .code-text, .compare-code, .card-code: forced to direction: ltr; text-align: left; unicode-bidi: embed so Java source code always renders left-to-right
[dir="rtl"] nav,
[dir="rtl"] .nav-inner {
  direction: ltr;
}

[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] .code-text,
[dir="rtl"] .card-code,
[dir="rtl"] .compare-code {
  direction: ltr;
  text-align: left;
  unicode-bidi: embed;
}

Arabic prose (headings, descriptions, explanations) continues to render RTL as expected.

Original prompt

This section details on the original issue you should resolve

<issue_title>Arabic version is flipping left/right code snippets</issue_title>
<issue_description>Not all content on the website should be completely flipped left/right for Arabic.

Source code in Java for example should remain as is!

Other things in terms of visual elements (such as the nav bar at the top of the website), should also remain LTR (left to right).</issue_description>

Comments on the Issue (you are @copilot in this section)

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@brunoborges
Fix Arabic RTL flipping code snippets and nav bar
3b245ca 
Co-authored-by: brunoborges <129743+brunoborges@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix flipping of code snippets in Arabic version Fix Arabic RTL flipping Java code blocks and nav bar Feb 26, 2026
@brunoborges
Copy link
Member

brunoborges commented Feb 26, 2026

@copilot add a screenshot to the landing page, and one for a sample slug detail page

@brunoborges brunoborges self-requested a review February 26, 2026 04:04
@brunoborges brunoborges marked this pull request as ready for review February 26, 2026 04:04
Copy link
Contributor Author

Copilot AI commented Feb 26, 2026 •
edited
Loading

@copilot add a screenshot to the landing page, and one for a sample slug detail page

Here are screenshots of both pages with the RTL fix applied (commit 3b245ca):

Landing page — nav bar stays LTR, code blocks in cards and hero stay LTR, Arabic text flows RTL:
Arabic landing page

Detail page (type-inference-with-var) — nav bar stays LTR, both code comparison panels (old Java 8 and modern Java 10+) stay LTR, Arabic prose (title, summary, explanations) flows RTL:
Arabic detail page

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • javaevolved.github.io
    • Triggering command: /usr/bin/curl curl -s REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

@brunoborges brunoborges merged commit cae8c63 into main Feb 26, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@brunoborges brunoborges Awaiting requested review from brunoborges

Assignees

@brunoborges brunoborges

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Arabic version is flipping left/right code snippets

2 participants

@brunoborges