Skip to content

Use CSS logical properties

What

Let's update our direction utility classes to use CSS logical properties.

Why

CSS logical properties are now supported by all major browsers for a while and are taking the writing direction into mind which is a lot more inclusive. It automatically solves issues around RTL languages like Hebrew and Arabic.

Proposal

Let's not introduce new utility classes but rather update the ones we have, e.g.

.gl-right-3 today sets right: $gl-spacing-scale-3; but instead we'd use inset-inline-end: $gl-spacing-scale-3; which equals to the same thing in LTR but would move it to the opposite end for RTL automatically.

This way we're also not breaking things or introducing an overwhelmingly amount of new utility classes and keep the "API" as-is.

As a first draft I'd like us to update the utility classes and the GitLab UI components.

Edited by Sascha Eggenberger