-
-
Notifications
You must be signed in to change notification settings - Fork 79k
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
Add RTL support #30980
Add RTL support #30980
Conversation
@twbs/team Content strategy concerns here, before going further: how/where should we show and test RTL? As a simple basis, I just duplicated our firt example, "Album" using a new So, two questions:
"Duplicated" examples looks fine IMHO, since they also allow to translate content (which would be very valuable). But when it comes to component, I have no strong opinion ATM. FYI, Boosted used a very ugly script to automatically duplicate examples and a sort of Kitchen Sink named "Boostwatch"—also available in RTL. None of those seems fine to me. |
Regarding content strategy, I think we need at 2-3 pieces:
|
7a0569b
to
3c30ab7
Compare
I tried to automate the Cheasheet page by parsing our components' markdown files, finding examples via a regex (ala So I'll go for a dedicated example, hand-managed for now: if anyone has any idea to improve this, feel free to mention or PR against this branch :) Edit: For now, I manually wrap up component examples, trying to be both exhaustive and concise. I'm still missing Content, Forms and Cards. |
8aa0c74
to
f6c048c
Compare
This is so encouraging to see! <3 |
Note to myself:
|
Hello, I've extensive experience working with RTL and I've been using logical properties and values in production for almost four years with fallbacks. I wrote a couple of guides for RTL one of them is published on CSS Tricks and I would love to help. Any suggestions where can I start looking? |
Hi @ahmadalfy, very glad to have some help! At the moment, you may help by checking the five example templates I converted to RTL: For now, I only ran out CSS through RTLCSS, and translated roughly their content to arabic (with tools). So I guess there can be things to improve on a CSS side (already noticed the carousel arrows) and the arabic content can probably be improved. There's not much more for now, I'm working on a full test page using every components: I think your experience will be extremely valuable when it's here, to find common issues and help fixing them. Also, we'll need to document working with RTL, so feel free to share any ressource you wrote or any suggestion that may help people using Bootstrap to work with RTL: there're tons of things missing on this PR current roadmap, I guess. Speaking about fallback for logical properties, does this mean physical properties? Or do you have another stratégie? |
Hi @ffoodd Will definitely check and share feedback if I have any. I can help with the documentation part for sure. Regarding the resources I wrote this article recently (Building Multi-Directional Layouts) about logical properties and values and how PostCSS plugins can help you use them now. I wrote another piece 6 years ago that still stands firm as well (Let's talk about RTL). There is another excellent guide written by Ahmad Shadeed RTLStyling.com. It covers a lot more topics and can be considered a complete resource for anyone who wants to work with RTL languages. Regarding your question about logical properties and values; yes, the fallback is done using physical properties. It's automatically translated using this PostCSS plugin. Please feel free to ping me anytime you need anything. |
Hello there... I'm Tawfeeq Amro working with biggest Arabic website in World (www.mawdoo3.com), and I hope I can help you in Arabic proofreading, Arabic translation, technicality and more. |
Hi, |
@ffoodd one of the problem that I found in your example in this url the arrows should point to outside not inside .. like this < ---- > |
This problem can be fixed by reflecting arrows or changing arrows positions (Better browser support):
|
yep the second solution is better I think |
That's actually a worse solution. This way you are moving the back button to the far left; which in Arabic should be on the right. What should be done is either using |
0c355b9
to
903555d
Compare
efb8f1a
to
98e8c5e
Compare
Using RTLCSS directives, renaming things to use logical names and following best practices.
Gradients caused artifacts in Safari, layout was feeling a little loose
a24456b
to
c41da4a
Compare
6f005c7
to
7ad508d
Compare
7ad508d
to
351653f
Compare
a433c0f
to
bcda106
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks fine to me. Well done!
@FaridAghili please make a new issue, this PR is long enough as is. |
Fixes #30918, fixes #24807, fixes #27783, fixes #31845
Preview — Examples — cheatsheet — RTL cheatsheet
Todo
Beta 2
direction
in the front matter and have that automatically toggle LTR to RTL CSS inclusionCheatsheet
button
s in cheatsheet side navigation, as it's been done in our main docs recentlyDocs
left
andright
in case we missed somethingDone
Test cases
dir="rtl"
—those on which direction makes a difference:lang="ar"
(andhreflang="ar"
in examples list)Maybe use some kind of Hugo shortcode to ease this?Spotted bugs
margin-right: 1rem;
should bemargin-left: 1rem;
(see comment below).word-break
on RTL?rtl
boolean property in our Utility API, to add an RTLCSSremove
directive around the utility.input
types that may be concerneddata
attributes would keepright
andleft
since it's Popper based, but the Bootstrap layout could still usestart
andend
to stay consistent.$breadcrumb-divider-flipped
to allow different separator for each direction.Documentation
font-family
for RTL (Boosted switches from Helvetica Neue to Helvetica Neue Arabic, for example)drop→ Irrelevant, we'll simply add RTL Styling 101 in additional resources.letter-spacing
if any ( https://www.rtlstyling.com/posts/rtl-styling/#1.-letter-spacing)rtl: {boolean}
in Utility API docChore things
_config.yml
.float-left { float: right; }
. It would also help to switch to logical properties one day (when dropping Legacy Edge, v6 or tomorrow with Revisit our browserslist config #30986 ?)css-rtl
task: something feels weird when it comes to start the docs, since it builds the dist then post-processes it for RTL.dir="rtl"
and calling it where appropriate to toggle right / left.package.json
changes:css-minify
to prevent a hundreds cols long script, but it's basically the same, split on two parts (standards + RTL)dist/css/
to reload when RTL files are compiled again (since they're not compiled from our sources but from our dist files)%3Cinput%20css%202%3E
/*rtl:raw*/
directive, used for[type="email"]
for example;/* rtl:* */
directives are correctly mapped to their sources./5.0/
) in--dir
and--base
).Questions
About the new Cheatsheet example: should we add introduction text before each component or section?→ Probably not, since it's mostly a detailed view not meant to replace docs.I used RTLCSS block-level syntax for directives, but RTLCSS' fork used property-level syntax. Block-level is lighter to output and faster to parse, but make it less obvious of what is important to ignore for RTL. Should I move to property-level syntax?→ Switched to property-level syntax, as argued in comments.References
css-compile-rtl
anddocs-rtl
mostly)Related
RTL concerns
#28797 #28238 #24807 #27123 #27122 #26879 #26818 #19545 #26299 #25422 #24662 #23703 #24332 #23117 #22708 #22137 #21619 #21180 #20293 #19555 #20075 #19787 #19703 #19668 #19643 #19545 #19379 #18184 #17595 #16455 #16419 #15717 #15700 #15509 #15479 #15433 #14717 #14510 #13564
Kitchen sink of sorts
#18645 #27783 #21209 #17423