naver
Support for RTL languages
Description
http://imgur.com/a/7QVf2
Steps to check or reproduce
<html dir="rtl">
<script>
var chart = bb.generate({
--
bindto: "#chart",
data: {
type: "bar",
columns: [
["القاهرة",0],["الأسكندرية",47],["بورسعيد",0],["السويس",0],["دمياط",428],["الدقهلية",2218],["الشرقية",2268],["القليوبية",1517],["كفر الشيخ",1340],["الغربية",1740],["المنوفية",166],["البحيرة",2468],["الاسماعيلية",248],["الجيزة",1700],["بني سويف",117],["الفيوم",1332],["المنيا",2261],["اسيوط",1674],["سوهاج",1971],["قنا",1355],["اسوان",464],["البحر الأحمر",11],["الوادي الجديد",62],["مطروح",74],["شمال سيناء",93],["جنوب سيناء",56],["الاقصر",383], ]
}
});
</script>
Is there any support or workaround to handle RTL?
thanks @dodyg for sharing this issue. Honestly speaking, we didn't took that in consideration before.
The main issue will be adjustment of contents, right? I think that can be fulfilled creating a new stylesheet for RTL languages.
Could you share more thoughts about that? Illustrating what will be the correct support for RTL languages.
RTL languages are mostly Arabic, Farsi, Urdu and Hebrew.
With RTL languages usually you have to pay attention to the margin/padding right/left situation.
@dodyg, would you mind contribute for RTL languages? Since we don't have experience treating RTL langues. So, it'll be great for RTL users if this feature is provided.
For CSS styles, the physical properties might be replaced by logical ones to support RTL out of the box (for instance, border-left would become border-inline-start, and text-align: left would become text-align: start). those logical properties are supported in browsers since a long time (at least for the ones relevant for styles using in the billboard CSS).
A big impact of the RTL support will be that the horizontal axis needs to go from right to left (and the main vertical axis will be on the right), which would change the computed positions in the SVG. And there, unfortunately, there is no logical version of SVG positions.
A solution to reduce the impact might be to compute all horizontal positions as negative numbers in RTL (to be checked whether this can indeed be done, using a variable containing 1 or -1 depending on the direction and using it to multiply existing computed value without modifying the whole logic), with a viewBox attribute setting min-x to -1 * width instead of 0 (so that the 0 value for x is at the right of the view box) (and still applying direction="rtl" on the root <svg> element so that text is written in RTL compared to its alignment point).
