The current image-replacement technique fails on right-to-left pages, to solve this we may add directionality: ltr; to make sure the text is indented in the right direction.
But if we're touching this I suggest a better image-replacement technique, the one used by H5BP.
The new technique avoids various problems with any text-indent method.
The benefits are:* No box of any kind is drawn offscreen, so there is no risk of
related performance problems in old iOS devices.* No need to specify a text-alignment and hide overflow since the text
is crushed to take up no space.* No need to hide `br` or make all fallback HTML `display:inline`
because unlike the text-indent approaches, this method is not
affected by those scenarios.* Fewer styles are needed as a result of these improvements.
Read more on github.
| Comment | File | Size | Author |
|---|---|---|---|
| #1 | patch-ltr-spacing.png | 231.5 KB | populist |
| better_ir_technique.patch | 481 bytes | tsi |
Comments
Comment #1
populist commentedI think that supporting LTR is a good goal and think the technique looks like the right direction. I did test the patch, however, and it creates some weirdness with the upper spacing of the buttons as per:
Comment #2
populist commentedNote - There is a good chance that this is caused by the latest changes to the Panels IPE CSS that happened after your patch.