@keyframes не поддерживает арабский - PullRequest
Новая
       20

@keyframes не поддерживает арабский

0 голосов
/ 01 июня 2019

Я пытаюсь написать предложение на арабском языке с @keyframes, но @keyframes не поддерживает арабский язык и выходит с непонятными символами 

.caption { background-color: black; }

.caption h1::after {
  animation: move 3s infinite;
  content: "";
  border-left: 1px solid #fff;
  color: #fff !important;
}

@keyframes move {
  0% {
    content: "م"
  }
  10% {
    content: "مر"
  }
  20% {
    content: "مرح"
  }
  30% {
    content: "مرحب"
  }
  100% {
    content: "مرحباً"
  }
}
<div class="caption">
  <h1></h1>
</div>

Буквы и символы, похожие на = - & ++ # @

1 Ответ

0 голосов
/ 01 июня 2019

Для арабского языка включите атрибуты dir="rtl" и lang="ar" для элементов тега с арабскими символами: 

h1::after {
  content: "مرح";
}

Пример 1: 

<h1>Testing Arabic</h1>

Этонеправильно отображать символы (в Chrome это работает, но в Safari и Firefox это не работает).

enter image description here

Пример 2: 

<h1 dir="rtl" lang="ar">Testing Arabic</h1>

Правильно отображается!

enter image description here

Также о проблемах, связанных с анимацией свойства content, можно прочитать здесь: https://css -tricks.com / animating-the-property-property /

Также вы можете включить в свои <head></head> теги <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

...