Published on <a href="https://blog.prototypr.io/the-case-of-the-jumping-dot-17f97aab8a4d?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Omar Bahareth 
When you enter the dot/full stop character when typing in English, it just works, and you don’t need to think about it dancing around your words and sentences. This isn’t the case in Arabic. Since the full stop character is technically considered a <a href="https://en.wikipedia.org/wiki/Bi-directional_text">BiDi (bidirectional) character</a>, weird stuff starts to happen. There’s no clear standard on how to render it correctly(as far as I know).
Take a look at this GIF for example:
<img alt="" src="https://cdn-images-1.medium.com/max/362/1*W4dUNX0JP_ZI33EM09iz3Q.gif">
The dot suddenly went to the beginning of the line (on the right side instead of the left), and the blinking cursor isn’t even moving. Now this doesn’t just happen with that character, it happens with any BiDi character (e.g. exclamation mark) in the middle of RTL (Right To Left) text.
There’s actually a solution to this for some characters, there’s <a href="https://www.fileformat.info/info/unicode/char/06d4/index.htm">an Arabic full stop character</a>, the only issue is that most people have no idea it exists or how to type it. I usually google it and copy it off of websites that show you Unicode characters, and it works pretty well as you can see in this example:
<img alt="" src="https://cdn-images-1.medium.com/max/354/1*RaDySb6voidlLSLRuDQQlw.gif">
The way it’s rendered is a bit weird, and some fonts render it at a very strange vertical position, but it doesn’t jump around text and drive me crazy.
Another solution is to “set the text direction” but most users don’t know how to do that, it doesn’t work well when you mix LTR (Left To Right) and RTL in the same line, and it isn’t even immediately obvious how to do that in a number of platforms/apps. So I propose changing the normal full stop character to the Arabic one when using Arabic input (and the same for all other applicable characters), on all desktop and mobile operating systems. Which by the way, is what already happens when you try to use type a <a href="http://www.fileformat.info/info/unicode/char/61f/index.htm">question mark with Arabic input</a>.
I’ve actually tweeted to Apple, Google, and Microsoft, as well as their CEOs with no response (yet).
<blockquote>
Could we get the Arabic full stop character to be inputted when we try to input a full stop with Arabic input? The normal one gets rendered all over the place and most people don&#8217;t know the Arabic one exists or how to type it. <a href="http://twitter.com/Apple" title="Twitter profile for @Apple">@Apple</a> <a href="http://twitter.com/Google" title="Twitter profile for @Google">@Google</a> <a href="http://twitter.com/Microsoft" title="Twitter profile for @Microsoft">@Microsoft</a> <a href="https://t.co/ccpePNJ45G">https://t.co/ccpePNJ45G</a>
 — <a href="https://twitter.com/o_bahareth/status/939275224801054721">@o_bahareth</a>
</blockquote>
<blockquote>
<a href="http://twitter.com/Apple" title="Twitter profile for @Apple">@Apple</a> <a href="http://twitter.com/Google" title="Twitter profile for @Google">@Google</a> <a href="http://twitter.com/Microsoft" title="Twitter profile for @Microsoft">@Microsoft</a> <a href="http://twitter.com/sundarpichai" title="Twitter profile for @sundarpichai">@sundarpichai</a> <a href="http://twitter.com/tim_cook" title="Twitter profile for @tim_cook">@tim_cook</a> <a href="http://twitter.com/satyanadella" title="Twitter profile for @satyanadella">@satyanadella</a> Could you guys get this looked at?
 — <a href="https://twitter.com/o_bahareth/status/939275739274326016">@o_bahareth</a>
</blockquote>
I would think these kind of UX issues are more important than where the cheese is on the burger emoji.
<blockquote>
I think we need to have a discussion about how Google&#8217;s burger emoji is placing the cheese underneath the burger, while Apple puts it on top
 — <a href="https://twitter.com/baekdal/status/924312294439444480">@baekdal</a>
</blockquote>
<blockquote>
Will drop everything else we are doing and address on Monday:) if folks can agree on the correct way to do this! <a href="https://t.co/dXRuZnX1Ag">https://t.co/dXRuZnX1Ag</a>
 — <a href="https://twitter.com/sundarpichai/status/924487551372615680">@sundarpichai</a>
</blockquote>
There are many other difficulties that we face which I might show in other posts but I’ll mention just a few which I regularly face and am extremely irritated by:
<ul>
<li>Selecting Arabic text, particularly when there’s English text within the selection. What’s rendered on-screen as selected isn’t actually what’s selected.</li>
<li>Tiny font sizes. Most websites I visit have a font size of around 16px (Google search bar for example), this looks fine for English, but many Arabic characters are not legible for some reason. I don’t know if this is the fault of the font or if we need dynamic font sizes per language.</li>
</ul>
It is my hope that this post will bring some of the issues many users face when typing Arabic on computers and phones to light, and even drive developers and font creators to tackle these issues. There are many apps and websites that have solved a lot of these issues, but we need this knowledge to be shared and turned into standards that operating systems and browsers handle, without every app and website having to repeat the work.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=17f97aab8a4d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/the-case-of-the-jumping-dot-17f97aab8a4d">The Case of The Jumping Dot</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Case of The Jumping Dot

Top Stories