more options as `false` by default about rtlcss HOT 6 CLOSED

I've seen many converters and all of them fail in automatically providing an RTL variant that is usable with the same html markup (bi-lingual web sites/apps).

Up to now, the default options worked so great for me in many projects, and I believe they work for bootstrap too (see this branch), clone it and run the docs locally. and see for your self! Its auto flipped using rtlcss and without touching the html (thanks to autoRename) .. check Carousel for example.

tooltip.js was updated to flip the calculated position.

autoRename (as explained here) works under a simple rule: if a given rule has no directional difference and its opposite exists then the names should be flipped (for example: glyphicon-chevron-left and glyphicon glyphicon-chevron-right).

Its unlikely to write a CSS rule having no horizontal significance and name it .right without an opposite .left, and in case you do! you can simply mark it with /*rtl:ignore*/ directive.

Since CSS is written in English, I think i18n friendly doesn't apply here. Although rtlcss is highly customizable and you can inject your own logic but I find it useful in case you want to add prev/next combination.

from rtlcss.

Without knowing the HTML, flipping the class names based on relatively fragile information can be a problem. I don't think we have a use case for it yet at Twitter. What we rely on is using the equivalent of the rename directive to change property values in RTL. Either way, it's an opinionated feature that goes beyond CSS bidi flipping, and can easily break on existing codebases, so I was expecting them to be false in the API by default.

from rtlcss.

Without knowing the HTML, flipping the class names based on relatively fragile information can be a problem.

Can you provide a single example where my approach would fail ?

What we rely on is using the equivalent of the rename directive to change property values in RTL.

Can you clarify with an example ?

Can easily break on existing codebases

I'm using my flipped bootstrap and there is nothing broken! I would appreciate it if you can provide an example.

I feel one of us is missing something here!

from rtlcss.

Can you provide a single example where my approach would fail ?

Any existing code base with urls or classes that contain the strings you're swapping. If it wasn't authored with that expectation, there will be unintentional changes. e.g., maybe there's no image with the new path, or no intent to replace the image, or no intent to rename the class because it will be unchanged in the HTML.

There's a pretty good chance it would break things for our RTL stylesheets. Not saying no one will ever use the feature, but it should be off by default IMO.

Can you clarify with an example ?

.icon-chevronLeft:before { content: "\f00" /*rtl:\f10*/; }

from rtlcss.

I got your point, but still it goes both ways, and I think its a low probability. The replacement is not that aggressive, by default word boundaries are respected. In your example .icon-chevronLeft will not be auto-renamed unless you turn the greedy option on (default:off).

Actually, Icon rules in general are the reason behind autoRename, I don't have to manually maintain mapping between directional rules - take "Font-Awesome" as an example.

I believe a successful flipping requires good understanding of the tool options, The author must compare and validate the generated CSS, Then apply necessary directives to ensure the output is as excpected.

from rtlcss.

@necolas v2.0 is out with more options as false by default :)

from rtlcss.