-
-
Save nilput/862028136f85d6999639c1be73a604b8 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <meta charset="utf-8"> | |
| <title>Arabic Bidirectional Text Example</title> | |
| <base href="https://nilput.com/"> | |
| <link rel="alternate" type="text/html" title="Arabic Bidirectional Text Example" href="https://nilput.com/pages/arabic"> | |
| <link rel="author" type="text/html" title="Turki's personal website" href="https://nilput.com"> | |
| <link rel="icon" href="/favicon.ico"> | |
| <link rel="stylesheet" href="/css/fonts/custom_fa.css"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta property="og:description" content="An example page to show how arabic is supposed to be displayed in weechat, which might be useful to developers to check their implementation. using HTML/CSS."> | |
| <meta property="og:title" content="Arabic Bidirectional Text Example"> | |
| <style> | |
| @font-face { | |
| font-display: block; | |
| font-family: 'brown'; | |
| src: url('./fonts/brown.woff2') format('woff2'); | |
| } | |
| body { | |
| align-items: center; | |
| } | |
| body, .container { | |
| height: 100vh; | |
| } | |
| .container { | |
| display: flex; | |
| } | |
| div { | |
| -webkit-font-smoothing: antialiased; | |
| font-family: 'Inconsolata', 'Monaco', 'Consolas', 'Courier New', Courier, monospace; | |
| justify-content: center; | |
| letter-spacing: 0; | |
| text-rendering: optimizeLegibility; | |
| text-shadow: 0 1px rgba(0, 0, 0, 0.3); | |
| } | |
| .rtl { | |
| font-family: brown, 'Inconsolata', 'Monaco', 'Consolas', 'Courier New', Courier, monospace; | |
| } | |
| .box { | |
| background: #1d1f21; | |
| border-radius: 0.3em; | |
| border: 1px solid #000; | |
| color: #c5c8c6; | |
| display: inline-block; | |
| font-size: 1.0rem; | |
| line-height: 1.5; | |
| margin: auto; | |
| padding: 1.5em 3.0em; | |
| tab-size: 4; | |
| text-align: left; | |
| vertical-align: baseline; | |
| white-space: pre; | |
| width: fit-content; | |
| } | |
| pre { | |
| color: white; | |
| -webkit-text-size-adjust: 100%; | |
| clear: both; | |
| margin: 0 0 0.25rem 0; | |
| } | |
| </style> | |
| <body> | |
| <div class="container"> | |
| <div class="box"> | |
| <pre> | |
| 17:17:34 bob | but in speaking i'm fine | |
| 17:17:35 steve | i know nothing about arabic grammar | |
| 17:17:41 steve | except what the text kinda looks like | |
| 17:17:48 steve | i can't read it at all | |
| 17:17:58 bob | <span class="rtl">⁧ذَهًبْتُ إلًى أحمًدٍ. ⁩ </span> | |
| 17:18:04 steve | i can't even see that in weechat | |
| 17:18:05 bob | "I went to Ahmad." | |
| 17:18:07 steve | its jsut a blank line | |
| 17:18:11 bob | me neither | |
| </pre> | |
| </div> | |
| </div> | |
| <script> | |
| /* | |
| * function pre_html_replace(pattern: <str> (required), | |
| * replacement: <str> (required), | |
| * pre: <DOM Object> (optional)) | |
| * Replaces raw HTML pattern with replacement in the <pre> dom element in the current page. | |
| * Note: should only be used with hardcoded trusted values, otherwise it's an XSS risk! | |
| */ | |
| function pre_html_replace(pattern, replacement, pre) { | |
| if (!pre && !(pre = document.querySelectorAll('pre')[0])) | |
| throw new Error('<pre> element was not found in the document.'); | |
| pre.innerHTML = pre.innerHTML.replaceAll(pattern, replacement); | |
| } | |
| const color_highlights = [[':', '#c7c400'], | |
| ['steve', '#60fdff']]; | |
| for (const [text, color] of color_highlights) { | |
| pre_html_replace(text, `<span style="color: ${color};">${text}</span>`); | |
| } | |
| </script> | |
| </body> | |
| </html> |
ncfavier
commented
Jul 20, 2021
for (const [text, color] of color_highlights) html_replace(text, `<span style="color: ${color};">${text}</span>`);
i applied the change, thanks for the suggestion, the usage of html_replace.apply(...) wasn't justified, it was a leftover from previous refactoring.
i wonder if the usage of unicode bidirectional control characters is necessary in this case inside a pre (i used RLI and PDI around the arabic text to get it to display correctly).
@khaledhosny might have an answer 👍
The lines are starting with LTR (or arbitrary text in general that can be of any direction), so BiDi isolates makes sure RTL text always has the right direction regardless of the text before it. In HTML/CSS you can use unicode-bidi instead of the raw control characters.
That's great, it's incredible how difficult it is to get Arabic text to display correctly, i did this in a simple game engine i worked on, and i used your library raqm while exploring harfbuzz and icu, i tried alternatives such as building and using skia, but i think for simple use cases it's better to do it in a low level way, to avoid increasing dependencies and to also have freedom with the appearance of the text.
i mean features such as anti-aliasing / subpixel rendering, kerning, styling, etc..
Raqm was very easy to use and its api was well documented.
Thanks for your response and your contributions.