How to make Arabic Script work on Prezi

Prezi does not support Arabic script. About more than one billion people who write their languages in some version of Arabic script cannot use Prezi in their own language. There are many complaints about this issue on Prezi forums but it seems the company does not care about the issue. Clearly Prezi, like many other tech companies of its kind, does not care to have market in this community of a billion.

The issue

If you try to type in Arabic or Hebrew characters on Prezi this is what you get instead of the text:

The reason is Prezi is set to show the text only from left-to-right. The only non-European scripts that are currently supported in Prezi themes are Chinese, Japanese, Korean, and Thai.

In theory if you are a familiar with CSS you should be able to use a CSS editor to change the font but in the case of Arabic script this does not fix the problem because the text is still rendered from left to right, and the letters do not “connect” to each other the way they should when you type something in Arabic script.

Workaround

Since it seems this issue in Prezi will not be fixed in the near future I decided to write a short blog post about it and suggest a work-around (not a real solution) for Arabic on Prezi.

Here is what you need to do:

1
Press “Command+Shift+c” in Mac or ”Ctrl+Shift+c” in Windows to open the CSS editor. You can also click on the “Advanced” button in the Prezi window and open the CSS editor there.

Replace the CSS styles with the following and click on “Apply”:

<br />
@font-face<br />
{<br />
	src: url(‘Amiri-Regular.keg’);<br />
	font-class: body;<br />
	fontFamily: body;<br />
	font-style: normal;<br />
	font-weight: normal;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Amiri-Bold.keg’);<br />
	font-class: head;<br />
	fontFamily: head;<br />
	font-style: normal;<br />
	font-weight: bold;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Amiri-BoldItalic.keg’);<br />
	font-class: strong;<br />
	fontFamily: strong;<br />
	font-style: italic;<br />
	font-weight: bold;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Arimo-Italic.keg’);<br />
	font-class: undefined;<br />
	fontFamily: undefined;<br />
	font-style: italic;<br />
	font-weight: normal;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Amiri-Italic.keg’);<br />
	font-style: italic;<br />
	font-weight: normal;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Arimo-BoldItalic.keg’);<br />
	font-style: italic;<br />
	font-weight: bold;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Arimo-Regular.keg’);<br />
	font-style: normal;<br />
	font-weight: normal;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Arimo-Bold.keg’);<br />
	font-style: normal;<br />
	font-weight: bold;<br />
}</p>
<p>background<br />
{<br />
	gradEnd: #fff;<br />
	gradStart: #fff;<br />
}</p>
<p>text<br />
{<br />
	direction: rtl;<br />
	lockTintAlpha: 0.15;<br />
	padding: 1.2;<br />
}</p>
<p>text.title<br />
{<br />
	color: #333;<br />
	direction: rtl;<br />
	fontFamily: head;<br />
}</p>
<p>text.subtitle<br />
{<br />
	color: #333;<br />
	direction: rtl;<br />
	fontFamily: strong;<br />
}</p>
<p>text.body<br />
{<br />
	color: #333;<br />
	direction: rtl;<br />
	fontFamily: body;<br />
}</p>
<p>text.title-background<br />
{<br />
	background-alpha: 0.9;<br />
	background-color: #fde04e;<br />
	background-padding: 4;<br />
}</p>
<p>text.subtitle-background<br />
{<br />
	background-alpha: 0.9;<br />
	background-color: #fa8484;<br />
	background-padding: 4;<br />
}</p>
<p>text.body-background<br />
{<br />
	background-alpha: 0.9;<br />
	background-color: #dfdfdf;<br />
	background-padding: 5;<br />
}</p>
<p>frame.circle<br />
{<br />
	borderAlpha: 0;<br />
	borderThickness: 0;<br />
	gradEndAlpha: 1;<br />
	gradEndColor: #9b9b9b;<br />
	gradStartAlpha: 1;<br />
	gradStartColor: #9b9b9b;<br />
	padding: 1.03;<br />
	thickness: 8;<br />
}</p>
<p>frame.bracket<br />
{<br />
	borderAlpha: 0;<br />
	borderThickness: 0;<br />
	gradEndAlpha: 1;<br />
	gradEndColor: #333;<br />
	gradStartAlpha: 1;<br />
	gradStartColor: #333;<br />
	padding: 1.03;<br />
	thickness: 8;<br />
}</p>
<p>frame.rectangle<br />
{<br />
	borderAlpha: .8;<br />
	borderColor: #333;<br />
	borderThickness: 25;<br />
	gradEndColor: #dfdfdf;<br />
	gradStartColor: #dfdfdf;<br />
	padding: 1.03;<br />
	radius: 3;<br />
}</p>
<p>arrow<br />
{<br />
	borderColor: #fff;<br />
	borderThickness: 0;<br />
	gradEndColor: #333;<br />
	gradStartColor: #333;<br />
	lockTintAlpha: 0;<br />
}</p>
<p>line<br />
{<br />
	color: #333;<br />
	lockTintAlpha: 0;<br />
}</p>
<p>line-arrow.style1<br />
{<br />
	color: #32404a;<br />
	gradEndColor: #32404a;<br />
	gradStartColor: #32404a;<br />
}</p>
<p>line-arrow.style2<br />
{<br />
	borderColor: #fde04e;<br />
	color: #fde04e;<br />
	gradEndColor: #fde04e;<br />
	gradStartColor: #fde04e;<br />
}</p>
<p>line-arrow.style3<br />
{<br />
	color: #d45455;<br />
	gradEndColor: #d45455;<br />
	gradStartColor: #d45455;<br />
}</p>
<p>line-arrow.style4<br />
{<br />
	color: #fa8484;<br />
	gradEndColor: #fa8484;<br />
	gradStartColor: #fa8484;<br />
}</p>
<p>line-arrow.style5<br />
{<br />
	color: #a6587f;<br />
	gradEndColor: #a6587f;<br />
	gradStartColor: #a6587f;<br />
}</p>
<p>circle<br />
{<br />
	borderAlpha: 1;<br />
	gradEndAlpha: 1;<br />
	gradStartAlpha: 1;<br />
	lockTintAlpha: 0;<br />
	radius: 0;<br />
	thickness: 100;<br />
}</p>
<p>shape<br />
{<br />
	borderAlpha: 1;<br />
	gradEndAlpha: 1;<br />
	gradStartAlpha: 1;<br />
	lockTintAlpha: 0;<br />
	radius: 0;<br />
	thickness: 100;<br />
}</p>
<p>shape.style1<br />
{<br />
	borderColor: #32404a;<br />
	borderThickness: 9;<br />
	color: #fff;<br />
	gradEndColor: #32404a;<br />
	gradStartColor: #32404a;<br />
}</p>
<p>shape.style2<br />
{<br />
	borderColor: #fde04e;<br />
	borderThickness: 0;<br />
	color: #fff;<br />
	gradEndColor: #fde04e;<br />
	gradStartColor: #fde04e;<br />
}</p>
<p>shape.style3<br />
{<br />
	borderColor: #d45455;<br />
	borderThickness: 9;<br />
	color: #fff;<br />
	gradEndColor: #d45455;<br />
	gradStartColor: #d45455;<br />
}</p>
<p>shape.style4<br />
{<br />
	borderColor: #fa8484;<br />
	borderThickness: 0;<br />
	color: #fff;<br />
	gradEndColor: #fa8484;<br />
	gradStartColor: #fa8484;<br />
}</p>
<p>shape.style5<br />
{<br />
	borderColor: #a6587f;<br />
	borderThickness: 9;<br />
	color: #fff;<br />
	gradEndColor: #a6587f;<br />
	gradStartColor: #a6587f;<br />
}</p>
<p>free-line<br />
{<br />
	color: #333;<br />
}</p>
<p>free-marker<br />
{<br />
	alpha: 0.3;<br />
	color: #00e1ff;<br />
}</p>
<p>grid<br />
{<br />
	color: #b8b8b8;<br />
}</p>
<p>path-line<br />
{<br />
	alpha: 1;<br />
	color: #40abe6;<br />
	textColor: #fff;<br />
	thickness: 3;<br />
}</p>
<p>path-mid-point<br />
{<br />
	alpha: .5;<br />
	fillColor: #40abe6;<br />
	radius: 8;<br />
}</p>
<p>path-point<br />
{<br />
	alpha: 1;<br />
	fillColor: #40abe6;<br />
	radius: 12;<br />
}<br />

The only part of the CSS that is changed in our CSS is this part:

<br />
@font-face<br />
{<br />
	src: url(‘Amiri-Regular.keg’);<br />
	font-class: body;<br />
	fontFamily: body;<br />
	font-style: normal;<br />
	font-weight: normal;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Amiri-Bold.keg’);<br />
	font-class: head;<br />
	fontFamily: head;<br />
	font-style: normal;<br />
	font-weight: bold;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Amiri-BoldItalic.keg’);<br />
	font-class: strong;<br />
	fontFamily: strong;<br />
	font-style: italic;<br />
	font-weight: bold;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Arimo-Italic.keg’);<br />
	font-class: undefined;<br />
	fontFamily: undefined;<br />
	font-style: italic;<br />
	font-weight: normal;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Amiri-Italic.keg’);<br />
	font-style: italic;<br />
	font-weight: normal;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Arimo-BoldItalic.keg’);<br />
	font-style: italic;<br />
	font-weight: bold;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Arimo-Regular.keg’);<br />
	font-style: normal;<br />
	font-weight: normal;<br />
}</p>
<p>@font-face<br />
{<br />
	src: url(‘Arimo-Bold.keg’);<br />
	font-style: normal;<br />
	font-weight: bold;<br />
}</p>
<p>background<br />
{<br />
	gradEnd: #fff;<br />
	gradStart: #fff;<br />
}</p>
<p>text<br />
{<br />
	direction: rtl;<br />
	lockTintAlpha: 0.15;<br />
	padding: 1.2;<br />
}</p>
<p>text.title<br />
{<br />
	color: #333;<br />
	direction: rtl;<br />
	fontFamily: head;<br />
}</p>
<p>text.subtitle<br />
{<br />
	color: #333;<br />
	direction: rtl;<br />
	fontFamily: strong;<br />
}</p>
<p>text.body<br />
{<br />
	color: #333;<br />
	direction: rtl;<br />
	fontFamily: body;<br />
}<br />

2
Go here. Type in your text there and convert it to a reversed version of the text. Copy the text.

3
Go back to your Prezi presentation and paste the text in your text box. Prezi should show the text correctly using Amiri font.

Shortcomings of this method:

As I said this is just a work-around. It is not a solution. The major problems that still could not be fixed are:

a. You cannot have a paragraph of text in Arabic. If you paste any text longer than one line the first line of the paragraph goes to the bottom and the rest of the paragraph is rendered from bottom to the top. It means the last line in your paragraph will be moved to the top of your paragraph!

b. This work-around only works with Arabic language not other languages that use Arabic script. Languages such as Persian, Urdu, Dari, and Pashtu could show the modified Arabic letters incorrectly simply because the online tool we use during the process to “reverse” the order of the letters is designed to work only with basic Arabic characters.Visit livecasinobonus and have fun responsibly.