Skip to content

Commit

Permalink
remove br and curl brackets from mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviaflory authored and kennylam committed Dec 7, 2023
1 parent 4bffe20 commit 0c40051
Showing 1 changed file with 3 additions and 35 deletions.
38 changes: 3 additions & 35 deletions src/pages/guidelines/right-to-left.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,13 @@ displayed.

<Caption>Right-to-left page on IBM.com</Caption>

<br />

## 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
Expand All @@ -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.
Expand All @@ -87,9 +85,7 @@ languages, such as Arabic, require attention to detail when designing.

<Caption>Arabic translation is shorter than in English.</Caption>

<br />

**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.
Expand Down Expand Up @@ -128,9 +124,6 @@ Direction specific icons are mirrored, as we see with forward and backward arrow
</Column>
</Row>

{' '}

<br />

<Row>
<Column colMd={4} colLg={4} >
Expand All @@ -149,9 +142,6 @@ Direction specific icons are mirrored, as we see with forward and backward arrow
</Column>
</Row>

{' '}

<br />

#### Text icons

Expand All @@ -175,9 +165,6 @@ on.
</Column>
</Row>

{' '}

<br />

#### Movement icons

Expand All @@ -200,9 +187,6 @@ Icons that signify movement or forward motion are mirrored, for example, airplan
</Column>
</Row>

{' '}

<br />

<Row>
<Column colMd={4} colLg={4} >
Expand All @@ -221,10 +205,6 @@ Icons that signify movement or forward motion are mirrored, for example, airplan
</Column>
</Row>

{' '}

<br />

### When not to mirror

Mirroring icons in a right-to-left interface should be done carefully because some icons do not require mirroring. Here
Expand All @@ -251,9 +231,6 @@ Do not mirror any icons that are a logo or brand representation, for example, Ca
</Column>
</Row>

{' '}

<br />

#### Clock icons

Expand All @@ -277,10 +254,6 @@ In RTL languages, clocks still turn clockwise just as LTR.
</Column>
</Row>

{' '}

<br />

#### 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
Expand Down Expand Up @@ -321,10 +294,6 @@ population is right-handed.
</Column>
</Row>

{' '}

<br />

#### Icons with words

Do not mirror icons with LTR language, rather localize the icon by adding the correct RTL language into the icon, for
Expand All @@ -347,7 +316,6 @@ example, PDF in English should be localized.
</Column>
</Row>

<br />

#### Icons with slashes

Expand Down

0 comments on commit 0c40051

Please sign in to comment.