Skip to content
Arc XP
Product Documentation

CSS logical properties on Arc Blocks

Background

Arc Blocks use logical properties in place of some physical properties. This can cause Blocks Styling override conflicts if you use physical properties or shorthand CSS that does not translate to logical properties.

The use of logical properties ensures Arc Blocks fully support right-to-left (RTL) languages and can scale to support vertical languages in the future. For more details on CSS logical properties, see Basic concepts of logical properties and values.

Action required

Before upgrading or deploying Themes 2.1.3+, ensure your Blocks Styling overrides adhere to the following:

  • The CSS logical properties and values are used in your Blocks Styling. You must replace some physical properties with the appropriate logical properties.
  • CSS Shorthand, like padding, does not translate to logical properties and should be avoided.

For more details, see the following recommendations.

Recommendations

These recommendations are required only if you currently have physical properties or CSS shorthand to support your Blocks Styling. If you are a new customer, you can immediately start using logical properties and refer to our Blocks Styling - Design System Guide. If you are new to logical properties, the following tips may also be helpful:

  • Expand your shorthand using a find and replace methodical approach. For example, padding is interpreted as padding-top padding-right padding-bottom padding-left, which causes issues where both the logical and physical properties could conflict.  
  • DO NOT blindly replace width/height with inline-size/block-size respectively, because doing so replaces line-height and some other non-logical values to incorrect CSS.
    • Refer to MDN Properties reference for valid values here.
  • Replace the most explicit to least explicit shorthand, for example:
CSS shorthand Logical properties
padding: a b c d; 
padding-block-end: c;
padding-block-start: a;
padding-inline-end: b;
padding-inline-start: d;
padding: a b c; 
padding-block-end: c;
padding-block-start: a;
padding-inline: b;
padding: a b; 
padding-block: a;
padding-inline: b;
padding: a; 
padding-block: a;
padding-inline: a;
  • This Stylelint plugin may be useful for setting your logical properties, but note that it does not cover all use cases (for example, positioning).
  • As mentioned previously, Themes did not convert all physical properties. For example, button borders that are consistent in all directions are using physical properties, as seen in the arc-themes-components GitHub repo. If you need to override these cases, you may need to reset the themes style to apply your own logical properties (border-width: unset or border-width: initial).

Resources