diff --git a/src/pages/guidelines/right-to-left.mdx b/src/pages/guidelines/right-to-left.mdx index 95b8df4f5..8adfbf3c4 100644 --- a/src/pages/guidelines/right-to-left.mdx +++ b/src/pages/guidelines/right-to-left.mdx @@ -41,15 +41,13 @@ displayed. Right-to-left page on IBM.com -
- ## Mirroring content To begin designing a RTL webpage, you can start by flipping the navigation, page layout, graphics from the LTR interface. This method is often referred to as mirroring. The UI can be mirrored from left-to-right to right-to-left, but not all elements are one to one. -**Elements that change when mirroring UI:** +#### Elements that change when mirroring UI: - Directional icons are mirrored, for example, back and forward arrows - Text field icons are mirrored on the opposite side of a field @@ -72,7 +70,7 @@ but not all elements are one to one. With right-to-left languages, typography is read from right to left, and all text is right aligned. Right-to-left languages, such as Arabic, require attention to detail when designing. -**Keep in mind the following:** +#### Keep in mind the following: - In Arabic and other RTL languages, most words are shorter in length than words in English. - Left-to-right languages don't change their direction when displayed on RTL webpages. @@ -87,9 +85,7 @@ languages, such as Arabic, require attention to detail when designing. Arabic translation is shorter than in English. -
- -**Things to avoid:** +#### Things to avoid: - Common abbreviations such as days of the week and months, such as Mon, Tues, Jan, and Dec, in English are not appropriate in Arabic and other right-to-left languages. @@ -128,9 +124,6 @@ Direction specific icons are mirrored, as we see with forward and backward arrow -{' '} - -
@@ -149,9 +142,6 @@ Direction specific icons are mirrored, as we see with forward and backward arrow -{' '} - -
#### Text icons @@ -175,9 +165,6 @@ on. -{' '} - -
#### Movement icons @@ -200,9 +187,6 @@ Icons that signify movement or forward motion are mirrored, for example, airplan -{' '} - -
@@ -221,10 +205,6 @@ Icons that signify movement or forward motion are mirrored, for example, airplan -{' '} - -
- ### When not to mirror Mirroring icons in a right-to-left interface should be done carefully because some icons do not require mirroring. Here @@ -251,9 +231,6 @@ Do not mirror any icons that are a logo or brand representation, for example, Ca -{' '} - -
#### Clock icons @@ -277,10 +254,6 @@ In RTL languages, clocks still turn clockwise just as LTR. -{' '} - -
- #### Right-handed object icons Any icon that represents an object that would be held in the right hand should not be mirrored, for example, paint @@ -321,10 +294,6 @@ population is right-handed. -{' '} - -
- #### Icons with words Do not mirror icons with LTR language, rather localize the icon by adding the correct RTL language into the icon, for @@ -347,7 +316,6 @@ example, PDF in English should be localized. -
#### Icons with slashes