1

I want to position a string of text inside the bottom right corner of an svg rect element in both RTL and LTR languages. Unfortunately, IE obeys the text-anchor attribute strictly regardless of text direction, whereas Chrome, FF, Safari and Opera swap the meaning of text-anchor: start and text-anchor: end in RTL mode. How can I position the text correctly cross-browser and in an RTL-compatible manner?

LTR: http://jsfiddle.net/ybr1s4d4/ (correct)

RTL: http://jsfiddle.net/ybr1s4d4/2/ (doesn't work in IE9+, don't care about IE8-)

dsb
  • 41
  • 4
  • possible duplicate of [How to define specific CSS rules for IE9 alone?](http://stackoverflow.com/questions/7364891/how-to-define-specific-css-rules-for-ie9-alone) – r3mainer Sep 16 '14 at 08:11
  • To add on the issue..., how would you do this in IE/Edge for something like? מאי - יוני 2016 where you have text in RTL then number (or number, then text if you look from left side)? – RUKAclMortality Sep 29 '17 at 08:38

1 Answers1

-1

For IE, you don't need any CSS rule (to re-define the text-anchor), so we can detect the IE browser and if it's not IE, just insert the rule (to override the text-anchor) using Javascript like this:

//if not IE, just insert the rule body[dir="rtl"] svg > text ...
if(!('ActiveXObject' in window)){
  document.styleSheets[0]
          .insertRule("body[dir='rtl'] svg > text { text-anchor: start;}",0);    
}

Updated demo.

Note I think it's not possible to solve this without using script.

King King
  • 61,710
  • 16
  • 105
  • 130
  • Without your added rule (meaning `ltr`), the text is not correctly placed. – Elfayer Aug 30 '16 at 13:52
  • @Elfayer you don't even understand the purpose of the question. That is to detect if the current browser is IE (so the most important thing in my answer is the `if` statement). There is not any constraint between the `ltr` or `rtl` with what you see on the UI which is determined by the CSS `text-anchor` (the default value is set in CSS section is `end` while the dynamic setting (which changes the value to `start`) is done via script and with the condition of the `if` statement. You should understand the question ***well*** before giving any wrong comment and downvote to the answerer. – King King Aug 31 '16 at 06:16
  • I tried to remove it in fact, but SO is locking it until the post is edited =/ – Elfayer Aug 31 '16 at 06:36