javascript-tutorial / javascript-tutorial/he.javascript.info

Text alignment and bidirectional text

オープン
#2 コメント 5 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
HTML
スター
4
フォーク
4
PR マージ指標
30日以内にマージされた PR はありません

説明

@iliakan

Short version:
There is a problem when writing in a right-to-left languages that can be easily solved in two ways:

1. Adding a dir attribute with the value of "rtl" to the html or body tag.
2. Adding a CSS style of "direction: rtl" to any of the above.
How should I solved it consider the server / translation files?
I saw [this issue](https://github.com/javascript-tutorial/server/issues/47) on the server repository, but the rtl.styl file doesn't make sense.
P.S I saw references to rtl languages in the stylus files, but the Arabic version seems wrong by its text alignment (should be to the right but it's to the left).

Long version:
There is a problem when writing in Hebrew, as well as in any other right-to-left language.
There are actually two problems:
1. The text aligned wrongly.
most of the times when an English text should be aligned to the left its Hebrew version should be aligned to the right (to the start of the paragraph).
2. Bidirectional text phrases are messy.
Consider the following sentence:

> קטעי התוכנה בשפה נקראים סקריפטים. הם יכולים להיכתב ישירות ב---- ולרוץ מיד כאשר העמוד עולה

        omitting "HTML" , This is a translation of:
> The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads

now, with "HTML" included:
> קטעי התוכנה בשפה נקראים סקריפטים. הם יכולים להיכתב ישירות בHTML ולרוץ מיד כאשר העמוד עולה

You can see that the beginning of the sentence is on the middle, the middle is on the end, and the end is on the beginning.
(Beginning: "קטעי..."; Middle: "הם יכולים..."; End: "ולרוץ...";)
It can be easily solved directly in the HTML, adding a "dir" attribute to either the html or body tag: ``, or using CSS: `html { direction: rtl; }`, but I don't know how to make it happen, consider the server files.
I saw [this issue](https://github.com/javascript-tutorial/server/issues/47) in the server repository, but the rtl.styl file doesn't make much sense. Also trying to `run ./edit he ar` caused an error (there isn't a fa.yml in the server repo, and I saw in /js/server/modules/config/webpack.js/202:
`style.define('isRTL', ['ar','fa'].includes(process.env.TUTORIAL_LANG));`, so I gave it a shot).
P.S I don't know Arabic, but the Arabic translation is aligned to left and by that seems to have the same problem. But there are mentions to isRTL in the stylus files.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

まず rtl.styl ファイルと 202 行目付近の server webpack 設定を読み、ヘブライ語とアラビア語の翻訳のスタイルを比較します。HTML または body の方向がどのように適用されるか、またヘブライ語と HTML テキストが混在した場合にどのようにレンダリングされるかを確認します。RTL テキストが正しく配置され、双方向のフレーズが意図した読み順を維持できれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
css, html, stylus
領域
frontend, internationalization, localization
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。