Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RTL layout for paragraphs starting with #65648

Open
ebraminio opened this issue Dec 24, 2018 · 13 comments
Open

RTL layout for paragraphs starting with #65648

ebraminio opened this issue Dec 24, 2018 · 13 comments
Labels
editor-RTL Editor Right-To-Left or Bi-Di issues feature-request Request for new features or functionality
Milestone

Comments

@ebraminio
Copy link

ebraminio commented Dec 24, 2018

#11770 is so vague that I can't even understand what is the requested feature... a clear and achievable change to VSCode for RTL is I believe starts from this, please make a paragraph RTL if it starts with RTL text.

Steps to reproduce:
Put this on gedit:

متن
متن
متن
متن
text
text
text
text

image

Now try the same with VSCode

image

Expected:
Easily achievable by adding dir=auto to div element and remove dir=ltr from the span, I just did it for the first line

image

Alternatively, you can put a switch (toggle-able with command switch, something like > Toggle Direction) and apply document direction switch to whole document and detect whether a document needs RTL direction behind the scene, if you don't like per paragraph direction setting.

@vscodebot
Copy link

vscodebot bot commented Dec 24, 2018

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

@vscodebot vscodebot bot added the editor-contrib Editor collection of extras label Dec 24, 2018
@ebraminio
Copy link
Author

@vscodebot not related

@ebraminio
Copy link
Author

ebraminio commented Dec 25, 2018

Thanks for assigning this :)

What I am requesting is entering this code,

$$('.mtk1[dir=ltr]').forEach(x => { x.removeAttribute('dir'); x.parentElement.parentElement.setAttribute('dir', 'auto'); })

Which turns

image

Into this,

image

The hard part however is to fix the issues afterward like incorrect assumption of text place,

image

So maybe you should do the direction detection in JavaScript so you will be in control of it and know what is its value.

@ebraminio
Copy link
Author

ebraminio commented Dec 27, 2018

So maybe you should do the direction detection in JavaScript so you will be in control of it and know what is its value.

You can also use dir=auto but detect the assigned direction using getComputedStyle I guess, better however be in control of direction detection algorithm I guess however as it is done somewhere else on the code already AFAIK.

@michael-james
Copy link

michael-james commented Jan 6, 2019

Thank you for working on this! I would like my department at work (we correct translated HTML and work with Arabic and Hebrew) to start using VS Code but I know that the ability to view these RTL languages right-aligned will be a crucial requirement. We currently use Notepad++ which allows you to manually flip the entire file to be viewed as right-aligned but I like the implementation you are discussing which would only right-align lines that are in the RTL language. However, we edit English JSON files that have Arabic/Hebrew strings, so the beginning of the line is English but we would still need to view it RTL, so we would probably need a full-document right-align ability for it to be effective.

Please let me know if you need help implementing this, I'm not quite sure where to start but am willing to assist.

@alexdima alexdima added feature-request Request for new features or functionality editor-rendering Editor rendering issues and removed editor-contrib Editor collection of extras labels Jan 7, 2019
@sarmadka
Copy link

What's the status of this? I am also looking for this solution, and it looks like many people are looking for it as well.

@lwcvl
Copy link

lwcvl commented Apr 18, 2019

I strongly support this request. Connected to this issue, also consider how punctuation behaves in this matter. Right now, VS Code will place a period at the end of a sentence to the very right of the Arabic text, like:

شيء مكتوب في اللغة العربية. [WRONG]

Visibly different from:

.شيء مكتوب في اللغة العربية [CORRECT]

This can also mess up brackets, making them face the wrong way:

)٢٣( [WRONG]

Instead of:

(٢٣) [CORRECT]

@drewpotter
Copy link

👍 Please fix RTL layout! 🙏

I am having the mentioned issue with brackets...

Screenshot 2019-08-10 at 13 52 14

@ebraminio
Copy link
Author

ebraminio commented Aug 10, 2019

Thanks for the report. Let's not confuse the issues which is the case with #11770, you report should be fixed with #78867 which filed separately to avoid confusion. Thanks

@zspitz
Copy link

zspitz commented Feb 4, 2020

@ebraminio I think the brackets problem arises because the paragraph direction is always set to LTR, as I've described here. Fixing the paragraph direction should fix the brackets issue.

@ebraminio
Copy link
Author

ebraminio commented Feb 4, 2020

Even the fact paragraph direction solves the issue for some of the cases but it doesn't always solve the issue where paragraph or document direction is not the same as the text, like the two above comments, bidi bracket is a separate matter http://www.unicode.org/notes/tn39/ which deserves to get fixed separately, like your analysis, let's don't mix that to this where is possible to keep them separate, mixing them makes just harder to vscode devs to know what is needed to get fixed.

@zspitz
Copy link

zspitz commented Feb 4, 2020

@ebraminio Agreed.

Which comments are you referring to? This comment is independent of paragraph direction, but AFAICT this comment happens because of paragraph direction -- AFAICT a period within an Arabic text run should render on the left, instead of on the right. @lwcvl Can you confirm this?

@Drkingman
Copy link

درود

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
editor-RTL Editor Right-To-Left or Bi-Di issues feature-request Request for new features or functionality
Projects
None yet
Development

No branches or pull requests

8 participants