|
Сообщение от laimas
|
|
Вроде бы не арабы
|
С арабским текстом код от
рони не работает. Оно тоже не в ту сторону идёт и разбивка на символы также отделяет диакритические знаки. В общем этот скрипт вообще не правильно работает, он не правильно обрабатывает испанские, еврейские, маратхи и пр. тексты. В русском языке буквы Ё и Й могут быть не в нормализованном виде. Хотя и существует метод normalize у строк, большинство символов не могут быть нормализованы, поскольку лигатурное начертание является единственно возможным. Также это относится и к эмоджи, флагам, и пр.
Вот, к примеру от
рони добавил некоторые тексты, чтобы было видно проблему...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-size: 2em;
}
</style>
<script>
addEventListener("DOMContentLoaded", () => {
const ps = document.querySelectorAll("p");
(function timer() {
for(const p of ps) {
const [...a] = p.textContent
p.textContent = a.pop() + a.join('')
}
setTimeout(timer, 100)
})();
});
</script>
</head>
<body>
<p>اَلسَّلَامُ عَلَيْكُمْ </p>
<p>שלום עליכם </p>
<p>שָׁלוֹם עֲלֵיכֶם </p>
<p>Head ööd! Tere päevast! </p>
<p>اَلسَّلَامُ عَلَيْكُمْ </p>
<p>Ñoño Yáñez come ñame en las mañanas con el niño. </p>
</body>
</html>
Как видите, это весьма странно, поскольку в некоторых языках мы не можем отрывать составные части от слова!
#funfact
|
Сообщение от laimas
|
|
А, бегущая строка, тогда по идее надо пробел добавить.
|
У меня это плохо сравнивается с такой строкой, например, на автобусе это не так выглядит, вот соорудил, похожее на бегущую строку... Бегущая строка, которая работает правильно на любом языке... а также с эмоджи и флагами и составными символами...
<text-display text="שלום עליכם" lang="he"></text-display>
<text-display text="Hello world!"></text-display>
<text-display text="اَلسَّلَامُ عَلَيْكُمْ" lang="ar"></text-display>
<style>
text-display {
background: radial-gradient(closest-side at center, transparent 30%, black 65%) center / 0.055em 0.055em;
background-color: #111;
color: transparent;
font: 900 5em / 1.5 monospace, system-ui;
border: 0.1em solid black;
text-shadow: 0 0 #fdf609, 0 0 0.05em #de1b08, 0 0 0.1em #de1b08;
display: flex;
overflow: hidden;
white-space: nowrap;
}
text-display::before, text-display::after {
content: attr(text) "\a0";
min-width: 100%;
will-change: transform;
animation: text-display 15s linear infinite;
animation-direction: inherit;
flex: 1 0 auto;
text-align: center;
mix-blend-mode: color-dodge;
}
:lang(ar), :lang(he) {
animation-direction: reverse;
}
@keyframes text-display {
to {
transform: translateX(-100%);
}
}
</style>