j0hnik, а сочетанные буквы?

Malleys,
сочетанные?
хочется взять букварь свернуть его в трубку... но...
не сегодня! :)

j0hnik, а сочетанные буквы? Вы вбросили свой пример на форум даже не проверив его работоспособность!

Ваш пример неправильно разбивает на графемы! Вот пример...

Неправильная разбивка текста

<div id="text" style="font-size: 2em;">안녕하세요 &#128514; </div>

<script>
	text.innerHTML = text.innerHTML.replace(/./gi, '<span>$&</span>');
	setInterval(() => text.appendChild(document.querySelector('span')), 50);
</script>

В данном случае нужна нормализация!

Немного более правильная разбивка текста

<div id="text" style="font-size: 2em;">안녕하세요 &#128514; </div>

<script>
	text.innerHTML = text.innerHTML.normalize().replace(/./gi, '<span>$&</span>');
	setInterval(() => text.appendChild(document.querySelector('span')), 50);
</script>

Хотя метод normalize не может обработать все случаи, он достаточно хорошо работает с большинством старых текстов. Современные тексты, которые содержат новые символы, эмоджи, флаги и пр. не могут быть правильно обработаны при помощи этого метода.

Для правильного разбиения текста используйте Grapheme Splitter.

Правильная разбивка текста

<script src="https://unpkg.com/grapheme-splitter@1.0.4/index.js"></script>
<div id="text" style="font-size: 2em;">안녕하세요 &#128514; </div>

<script>
	var splitter = new GraphemeSplitter();
	text.innerHTML = splitter.splitGraphemes(text.innerHTML).map(g => `<span>${g}</span>`).join("");
	setInterval(() => text.appendChild(text.querySelector('span')), 50);
</script>

Malleys,
:stop: Grapheme Splitter будет работать с древнеегипетским????
Если нет, то весь макет коту под хвост!

Каждый египетский иероглиф занимает одну кодовую точку, также как это делают буквы русского алфавита в нормализованном (это касается букв Ё и Й) виде. Где вы вообще увидели проблему?

Речь идёт о составных символах, например, флаги, расы (негритянки, мулаты, белые и пр.), хангыль (чамо), причёски, буквы с диакритикой, профессии и пр., которые состоят из нескольких кодовых точек.

Например, рассмотрим флаг России 🇷🇺. Он состоит из двух региональных индикаторов (🇷 и 🇺 ), однако когда эти индикаторы стоят рядом, то они означают один флаг, соответственно только одну графему!

<style>
  @font-face {
    font-family: "Flags";
    src: url("https://cdn.glitch.com/348d485e-4ba6-4841-a41e-5865874b2d66%2FBabelStoneFlags.ttf");
    unicode-range: U+1F1E6-FF;
  }

  html {
    font: 300% "Flags";
    background: #ddd;
  }
</style>

&#127479; + &#127482; = &#127479;&#127482;

Это означает, что при разбиении текста нельзя делить флаги, поскольку тогда в бегущей строке возникнет момент, когда в конце строки окажется только один региональный индикатор, и флаг поломается!

Не говоря уже о ситуации, когда вы каждую кодовую точку оборачиваете в <span>, тем самым ломая текст! Нужно оборачивать каждую графему в <span>, тогда всё будет в порядке!

На самом деле это проблема в JavaScript, в котором нет способа перечислять графемы в строке. Или я что-то пропустил?

:yes: а если еще немножечко глубже вникнуть

Вникнул, ничего не нашёл! Пожалуйста, поделитесь вашим способом перечислять графемы в строке.

Malleys,
https://github.com/orling/grapheme-splitter

пост #13
SuperZen, это разве не одно и тоже?

если этот сплиттер не работает, надо руками его допилить, в исходном коде дописать ) недостающие условия определения графемы...