I am creating a portfolio in Arabic. The problem is that the arabic text when Animated has weird spaces in the middle of the word. And if you know Arabic you know that the letter in a word is together without spaces. When I use english it works because the font isn't cursive. This is an example with a sentence in arabic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.typewriter{
padding: 20px;
}
.typewriter h1 {
text-transform: none!important;
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0; /* Remove auto margin to align left */
letter-spacing: .15em;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
</style>
</head>
<body>
<div class="typewriter">
<h1>اهلا وسهلا</h1>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.typewriter{
padding: 20px;
}
.typewriter h1 {
text-transform: none!important;
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0; /* Remove auto margin to align left */
letter-spacing: .15em;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
</style>
</head>
<body>
<div class="typewriter">
<h1>Hello world!</h1>
</div>
</body>
</html>How to fix it?