Last active
July 27, 2021 10:40
-
-
Save nilput/862028136f85d6999639c1be73a604b8 to your computer and use it in GitHub Desktop.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Author
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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-bidiinstead of the raw control characters.