为什么印地语文本在 safari 中无法正确显示？

问题描述 投票：0回答：1

我正在尝试显示印地文文本。但它加载不正确。 我尝试简单地将文本粘贴到新文件中并且它正在工作，在这种情况下它可能不起作用？ 印地文脚本是带有类词 w2 的第二个跨度。

<!DOCTYPE html>
<html lang="en">
<head>
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        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;
  }
    </style>
</head>
<body>
    <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>
      <!-- JS -->
      <script>
        "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);
      </script>
    
</body>
</html>

this is the output

但是当我正常输入印地语脚本（例如在 p 标签中）时，它显示正确。

可能是什么问题？

javascript html css browser safari
1个回答
0
投票

您需要进行字素分割以正确分割这些字符并避免分解重要的代码点。使用 

.split("")
分割字符串的代码单元，这太细粒度了，最终会将需要保持在一起的代码单元彼此分开。在 JavaScript 中进行石墨烯分割并不总是可能的，但是，最近一个名为 
Intl.Segmenter
的新 API 使得做到这一点成为可能，但是我们是否知道 浏览器支持:

"use strict";

const graphemeSplit = (str, local) => {
  const segmenter = new Intl.Segmenter(local, {granularity: 'grapheme'});
  const segitr = segmenter.segment(str);
  return Array.from(segitr, ({segment}) => segment);
}

let words = document.querySelectorAll(".word");
words.forEach((word) => {
  const local = word.dataset.local;
  let letters = graphemeSplit(word.textContent, local);
  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-local="en">Abhay_Chandra</span>
    <span class="word w-2" data-local="hi-IN">अभय चंद्रा </span>
    <span class="word w-3" data-local="ja-JP">アバイ・チャンドラ</span>
    <span class="word w-4" data-local="ru-RU">Абхай Чандра</span>
    <span class="word w-5" data-local="ko-KR">아바이 찬드라</span>
  </p>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.