Skip to content

Update the automation tools href #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Update the automation tools href #7

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cdf4f67
Update the automation tools href
Ahmedfathyarafa Jun 16, 2020
a760cb0
Merge pull request #1 from Ahmedfathyarafa/Ahmedfathyarafa-patch-1
Ahmedfathyarafa Jun 16, 2020
a5249c4
Update Text Decoration section
Ahmedfathyarafa Jun 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions posts/rtl-styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ When `dir="rtl` is set on the element, the title is much clearer. That is, the s
## Handling Fonts
Based on the design for both LTR and RTL layouts, there should be a specific font for each direction. Some fonts can work for multiple languages, which are great. However, brands and businesses tend to use a different font for RTL.

To account for that, we should define a different font in the font settings of your project. See [Automation Tools](./#automation-tools) for more details.
To account for that, we should define a different font in the font settings of your project. See [Automation Tools](#automation-tools) for more details.

## Font Family
In CSS, `font-family` works in a way that makes it easy to fall back to another font, in case a font didn't load. However, it turned out that if specific glyphs are not supported by the first font in the declaration, it will try to use the second font.
Expand Down Expand Up @@ -348,7 +348,7 @@ The dots highlighted in blue overlap with the underline. This is not good, and i
~~It’s possible to change the underline’s style and color with the new `text-decoration-style` and `text-decoration-color` properties. However, it is not guaranteed to work with all typefaces and font sizes. At the time of writing, Firefox is the browser that has the best support for these properties.~~

**Update: 18 Jan 2020**
Based on [this](https://github.com/shadeed/rtl-styling/issues/4) issue on Github, it turned out that using `text-decoration-skip-ink` property can solve the issue of dots overlapping with the underline. The default value for it is `skip`.
Based on [this](https://github.com/shadeed/rtl-styling/issues/4) issue on Github, it turned out that using `text-decoration-skip-ink` property can solve the issue of dots overlapping with the underline. The default value for it is `auto`.

<p class="codepen" data-height="214" data-theme-id="light" data-default-tab="result" data-user="shadeed" data-slug-hash="9f8c134e0d4fe1f0d58ba3c23cb96e41" style="height: 214px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RTL Styling - Text Decoration">
<span>See the Pen <a href="https://codepen.io/shadeed/pen/9f8c134e0d4fe1f0d58ba3c23cb96e41">
Expand Down Expand Up @@ -858,4 +858,4 @@ Special thanks to my wife, [Kholoud](https://twitter.com/kholoud840), for her co
- [Right-to-Left Development: Tips and Tricks](https://steelkiwi.com/blog/right-left-development-tips-and-tricks/)
- [Arabic Numerals](https://en.wikipedia.org/wiki/Arabic_numerals)

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>