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

Text alignment and bidirectional text

未关闭
#2 5 条评论 0 个 reaction 已指派 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 摘要。