Skip to content

adding RTL support#303

Open
mostaf7583 wants to merge 1 commit intokiegroup:mainfrom
mostaf7583:main
Open

adding RTL support#303
mostaf7583 wants to merge 1 commit intokiegroup:mainfrom
mostaf7583:main

Conversation

@mostaf7583
Copy link
Copy Markdown

@mostaf7583 mostaf7583 commented Dec 27, 2024

Description

This pull request adds support for RTL (Right-to-Left) languages. Specifically, I've included Arabic text with the appropriate HTML structure and CSS styles to ensure proper rendering. The font used is 'Amiri', and I've provided a path to the font file.

Here's the htmlString that demonstrates the changes:

String htmlString = 
    "<html lang=\"ar\">\n" +
    "<head>\n" +
    "    <meta charset=\"UTF-8\" />\n" +
    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n" +
    "    <title>سورة الفلق</title>\n" +
    "    <style>\n" +
    "        @font-face {\n" +
    "            font-family: 'Amiri';\n" +
    "            src: url('file:///home/mostafa/Desktop/Archive/testingplayer/searchfr/temp/temp_bc/org.kie.bc.KIEWebapp/fonts/Amiri-Regular.ttf');\n" +
    "        }\n" +
    "        body {\n" +
    "            font-family: 'Amiri', serif;\n" +
    "            direction: rtl;\n" +
    "            text-align: right;\n" +
    "            background-color: #f9f9f9;\n" +
    "            color: #333;\n" +
    "            padding: 20px;\n" +
    "            margin: 0;\n" +
    "        }\n" +
    "        .verse {\n" +
    "            margin-bottom: 20px;\n" +
    "        }\n" +
    "        .verse-number {\n" +
    "            font-weight: bold;\n" +
    "            color: #555;\n" +
    "        }\n" +
    "    </style>\n" +
    "</head>\n" +
    "<body>\n" +
    "    <div class=\"verse\">\n" +
    "        <span class=\"verse-number\">١</span> قُلْ أَعُوذُ بِرَبِّ ٱلْفَلَقِ\n" +
    "    </div>\n" +
    "    <div class=\"verse\">\n" +
    "        <span class=\"verse-number\">٢</span> مِن شَرِّ مَا خَلَقَ\n" +
    "    </div>\n" +
    "    <div class=\"verse\">\n" +
    "        <span class=\"verse-number\">٣</span> وَمِن شَرِّ غَاسِقٍ إِذَا وَقَبَ\n" +
    "    </div>\n" +
    "    <div class=\"verse\">\n" +
    "        <span class=\"verse-number\">٤</span> وَمِن شَرِّ ٱلنَّفَّٰثَٰتِ فِى ٱلْعُقَدِ\n" +
    "    </div>\n" +
    "    <div class=\"verse\">\n" +
    "        <span class=\"verse-number\">٥</span> وَمِن شَرِّ حَاسِدٍ إِذَا حَسَدَ\n" +
    "    </div>\n" +
    "</body>\n" +
    "</html>";

Notes

  • The font file path provided in the CSS (src: url('file:///home/mostafa/Desktop/Archive/testingplayer/searchfr/temp/temp_bc/org.kie.bc.KIEWebapp/fonts/Amiri-Regular.ttf');) should be updated to the correct path in your environment.
  • The HTML and CSS are designed to ensure the content is displayed correctly in RTL format, with proper font styling and alignment.

Additional Information

This is my first ever pull request, and I'm excited to contribute to this project. I appreciate your time and feedback on this addition. Thank you for the opportunity to contribute!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@mostaf7583