Issue
I am trying to display hindi text. But its not loading correctly. I tried to simply paste the text in a new file and it is working, what might be the case that in this case it is not working? The hindi script is the second span with class word w2.
"use strict";
let words = document.querySelectorAll(".word");
words.forEach((word) => {
let letters = word.textContent.split("");
word.textContent = "";
letters.forEach((letter) => {
let span = document.createElement("span")
span.textContent = letter;
span.className = "letter";
word.append(span);
});
});
let currentWordIndex = 0;
let maxWordIndex = words.length - 1;
words[currentWordIndex].style.opacity = "1";
let rotateText = () => {
let currentWord = words[currentWordIndex];
let nextWord =
currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
//rotate out letters of current word
Array.from(currentWord.children).forEach((letter, i) => {
setTimeout(() => {
letter.className = "letter out";
}, i * 80)
});
//reveal and rotate in letters of next word
nextWord.style.opacity = "1";
Array.from(nextWord.children).forEach((letter, i) => {
letter.className = "letter behind";
setTimeout(() => {
letter.className = "letter in";
}, 340 + i * 80)
});
currentWordIndex =
currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
};
rotateText();
setInterval(rotateText, 4000);
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #222;
}
.rotating-text {
font-family: monospace;
font-weight: bold;
font-size: 36px;
color: #fff;
transform: translateX(-80px);
}
.rotating-text p {
display: inline-flex;
margin: 0;
vertical-align: top;
}
.rotating-text p .word {
position: absolute;
display: flex;
opacity: 0;
}
.rotating-text p .word .letter {
transform-origin: center center 25px;
}
.rotating-text p .word .letter.out {
transform: rotateX(90deg);
transition: 0.5s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text p .word .letter.in {
transition: 0.8s ease;
}
.rotating-text p .word .letter.behind {
transform: rotateX(-90deg);
}
.w-1 {
color: #e74c3c;
}
.w-2 {
color: #8e44ad;
}
.w-3 {
color: #3498db;
}
.w-4 {
color: #28cc71;
}
.w-5 {
color: #f1c40f;
}
<div class="rotating-text">
<p>Hello! My Name is </p>
<p>
<span class="word w-1">Abhay_Chandra</span>
<span class="word w-2">अभय चंद्रा </span>
<span class="word w-3">アバイ・チャンドラ</span>
<span class="word w-4">Абхай Чандра</span>
<span class="word w-5">아바이 찬드라</span>
</p>
</div>
but when i normally type the hindi script , like in a p tag, it is appearing correctly.
What could be the issue?
Solution
You'll need to do a grapheme split to split these characters correctly and to avoid breaking apart the important code points that form the "characters". Using .split("")
splits on the code units of your string, which is too granular and ends up splitting code units apart from each other that you need to keep together. Doing a graphene split in JavaScript hasn't always been easy, however, somewhat recently a new API called Intl.Segmenter
has made it easier to do this, but do be aware of the browser support:
const graphemeSplit = (str, locale) => {
const segmenter = new Intl.Segmenter(locale, {granularity: 'grapheme'});
const segitr = segmenter.segment(str);
return Array.from(segitr, ({segment}) => segment);
}
"use strict";
const graphemeSplit = (str, locale) => {
const segmenter = new Intl.Segmenter(locale, {granularity: 'grapheme'});
const segitr = segmenter.segment(str);
return Array.from(segitr, ({segment}) => segment);
}
let words = document.querySelectorAll(".word");
words.forEach((word) => {
const locale = word.dataset.locale;
let letters = graphemeSplit(word.textContent, locale);
word.textContent = "";
letters.forEach((letter) => {
let span = document.createElement("span")
span.textContent = letter;
span.className = "letter";
word.append(span);
});
});
let currentWordIndex = 0;
let maxWordIndex = words.length - 1;
words[currentWordIndex].style.opacity = "1";
let rotateText = () => {
let currentWord = words[currentWordIndex];
let nextWord =
currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
//rotate out letters of current word
Array.from(currentWord.children).forEach((letter, i) => {
setTimeout(() => {
letter.className = "letter out";
}, i * 80)
});
//reveal and rotate in letters of next word
nextWord.style.opacity = "1";
Array.from(nextWord.children).forEach((letter, i) => {
letter.className = "letter behind";
setTimeout(() => {
letter.className = "letter in";
}, 340 + i * 80)
});
currentWordIndex =
currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
};
rotateText();
setInterval(rotateText, 4000);
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #222;
}
.rotating-text {
font-family: monospace;
font-weight: bold;
font-size: 36px;
color: #fff;
transform: translateX(-80px);
}
.rotating-text p {
display: inline-flex;
margin: 0;
vertical-align: top;
}
.rotating-text p .word {
position: absolute;
display: flex;
opacity: 0;
}
.rotating-text p .word .letter {
transform-origin: center center 25px;
}
.rotating-text p .word .letter.out {
transform: rotateX(90deg);
transition: 0.5s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text p .word .letter.in {
transition: 0.8s ease;
}
.rotating-text p .word .letter.behind {
transform: rotateX(-90deg);
}
.w-1 {
color: #e74c3c;
}
.w-2 {
color: #8e44ad;
}
.w-3 {
color: #3498db;
}
.w-4 {
color: #28cc71;
}
.w-5 {
color: #f1c40f;
}
<div class="rotating-text">
<p>Hello! My Name is </p>
<p>
<span class="word w-1" data-locale="en">Abhay_Chandra</span>
<span class="word w-2" data-locale="hi-IN">अभय चंद्रा </span>
<span class="word w-3" data-locale="ja-JP">アバイ・チャンドラ</span>
<span class="word w-4" data-locale="ru-RU">Абхай Чандра</span>
<span class="word w-5" data-locale="ko-KR">아바이 찬드라</span>
</p>
</div>
If you need something with better browser support, I'd suggest splitting up your characters manually and storing them in an object:
const localeGraphemes = {
"en":["A","b","h","a","y","_","C","h","a","n","d","r","a"],
"hi-IN":["अ","भ","य"," ","चं","द्रा"," "],
"ja-JP":["ア","バ","イ","・","チ","ャ","ン","ド","ラ"],
"ru-RU":["А","б","х","а","й"," ","Ч","а","н","д","р","а"],
"ko-KR":["아","바","이"," ","찬","드","라"]
};
"use strict";
const localeGraphemes = {
"en":["A","b","h","a","y","_","C","h","a","n","d","r","a"],
"hi-IN":["अ","भ","य"," ","चं","द्रा"," "],
"ja-JP":["ア","バ","イ","・","チ","ャ","ン","ド","ラ"],
"ru-RU":["А","б","х","а","й"," ","Ч","а","н","д","р","а"],
"ko-KR":["아","바","이"," ","찬","드","라"]
};
let words = document.querySelectorAll(".word");
words.forEach((word) => {
const locale = word.dataset.locale;
let letters = localeGraphemes[locale];
word.textContent = "";
letters.forEach((letter) => {
let span = document.createElement("span")
span.textContent = letter;
span.className = "letter";
word.append(span);
});
});
let currentWordIndex = 0;
let maxWordIndex = words.length - 1;
words[currentWordIndex].style.opacity = "1";
let rotateText = () => {
let currentWord = words[currentWordIndex];
let nextWord =
currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
//rotate out letters of current word
Array.from(currentWord.children).forEach((letter, i) => {
setTimeout(() => {
letter.className = "letter out";
}, i * 80)
});
//reveal and rotate in letters of next word
nextWord.style.opacity = "1";
Array.from(nextWord.children).forEach((letter, i) => {
letter.className = "letter behind";
setTimeout(() => {
letter.className = "letter in";
}, 340 + i * 80)
});
currentWordIndex =
currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
};
rotateText();
setInterval(rotateText, 4000);
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #222;
}
.rotating-text {
font-family: monospace;
font-weight: bold;
font-size: 36px;
color: #fff;
transform: translateX(-80px);
}
.rotating-text p {
display: inline-flex;
margin: 0;
vertical-align: top;
}
.rotating-text p .word {
position: absolute;
display: flex;
opacity: 0;
}
.rotating-text p .word .letter {
transform-origin: center center 25px;
}
.rotating-text p .word .letter.out {
transform: rotateX(90deg);
transition: 0.5s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text p .word .letter.in {
transition: 0.8s ease;
}
.rotating-text p .word .letter.behind {
transform: rotateX(-90deg);
}
.w-1 {
color: #e74c3c;
}
.w-2 {
color: #8e44ad;
}
.w-3 {
color: #3498db;
}
.w-4 {
color: #28cc71;
}
.w-5 {
color: #f1c40f;
}
<div class="rotating-text">
<p>Hello! My Name is </p>
<p>
<span class="word w-1" data-locale="en"></span>
<span class="word w-2" data-locale="hi-IN"></span>
<span class="word w-3" data-locale="ja-JP"></span>
<span class="word w-4" data-locale="ru-RU"></span>
<span class="word w-5" data-locale="ko-KR"></span>
</p>
</div>
Answered By - Nick Parsons
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.