DEV Community

Cover image for Add Right to Left Text To Your GitHub Profile README
Ben Greenberg
Ben Greenberg

Posted on

Add Right to Left Text To Your GitHub Profile README

Just a few days ago GitHub introduced a great new feature available for your profile. You are now able to add a README to your profile, which shows up on your homepage.

The new README lets you add a lot more customization to your profile, and share with visitors more information about yourself. It is a good way to contextualize the activity chart, the pinned repositories and other already available information points on the profile.

The possibilities for what you can do with it are seemingly endless! Just check out some of these other posts on DEV on what people have done:

In addition to all these awesome ideas, you can also share with folks that you speak more than one language. Knowing another language is a great asset to highlight.

What if your second (or third, fourth, etc.) language is not written left to right? How do you add Arabic, Hebrew, Farsi, Urdu and other languages to your GitHub README profile?

If you are a speaker of one of those languages, you are well aware that internationalization is often a second-class citizen in web development. Text editors, input boxes and more often do not consider the needs of languages not written in Latin characters or in a different direction. This can cause all sorts of issues, with misplaced punctuation marks being the most common.

GitHub uses a specialized implementation of markdown that it will render on documentation. This means that not all HTML tags will render in a GitHub README.

In that case, what is a relatively straightforward way to add RTL recognition in your new GitHub profile README?

There is a special right to left embedded unicode character that you can add to the beginning of each right to left sentence:

‫
Enter fullscreen mode Exit fullscreen mode

This lets the interpreter know that what follows it show be rendered from right to left.

Take this one line text from my GitHub profile README as an example:

‫ ΧΧ”ΧœΧŸ! πŸ‘‹
Enter fullscreen mode Exit fullscreen mode

Without being enclosed in the code snippet markdown of the triple back-ticks, it renders with the exclamation point in the correct place:

‫ ΧΧ”ΧœΧŸ! πŸ‘‹

There are other methods to add right to left text support to your markdown documentation, including your new GitHub profile README. This way, though, is a quick and easy way to add some RTL text with just the addition of one unicode character.

In the long term, we can all advocate for websites such as GitHub and others to make internationalization a higher priority.

Top comments (5)

Collapse
 
yaser profile image
Yaser Al-Najjar

Or easier, use the dir attribute 😁

I made an example gist for you:

gist.github.com/yaseralnajjar/7f27...

Collapse
 
bengreenberg profile image
Ben Greenberg

That works too! :)

Collapse
 
aliwesome profile image
Ali Sameni

No man, It's not easier!
I just add this character on the top of my markdown and whole content went RTL, this is really cool.

Collapse
 
jayehernandez profile image
Jaye Hernandez

This is such a great step towards internationalization! πŸ‘πŸΌ Thank you as well for linking the article I did. πŸ™πŸ»

Collapse
 
bengreenberg profile image
Ben Greenberg

It was a great article!