I want to let the user switch the whole document between LTR and RTL. Some CSS properties have start
and end
values that follow the direction of the document. Most geometrical relations are though absolute.
I want to do something like this if possible, in plain CSS without Javascript and without reloading the document:
if <body> dir is ltr
use padding-left: 65px;
if <body> dir is rtl
use padding-right: 65px;
Edit: Here is i complete list of logical properties and values, so adding a conditional properties may not be needed altogether. Note though that some or all will not work on few years old browsers. My 4yo Galaxy s8 for instance, has never updated its native browser who did not support logical.
Edit2: See now that float: inline-start and inline-end
are only supported by Firefox, so back to conditional CSS,
CodePudding user response:
body[dir=rtl] #some-id{
padding-right: 65px;
color: red;
}
body[dir=ltr] #some-id{
padding-left: 65px;
color:green;
}
<body dir="ltr">
<div id="some-id">test</div>
</body>