HTML 텍스트 위에 덧말 강조점 쓰기 · cho.sh

HTML 텍스트 위에 덧말 강조점 쓰기

Warning

This post is more than a year old. Information may be outdated.

그동안 글자 위에 글자를 어떻게 적는지 궁금했는데 HTML의 기본 기능 만으로도 해결 가능하다는 것을 알게 되었다. 참고로 이런 '글자 위의 글자'는 phonetic guide, 후리가나, 루비 문자, 덧말 (한컴오피스), 또는 윗주(MS Word)라고도 한다. HTML에서는 <ruby> 태그를 통해 이 기능을 사용할 수 있다.

大韓民國(대한민국)은 民主共和國(민주공화국)이다.

는 것입니다.

Backlinks1

221119

Comments0

No comments yet. Be the first to share your thoughts.

Comments

html

<ruby>大<rp>(</rp><rt>대</rt><rp>)</rp></ruby>
<ruby>韓<rp>(</rp><rt>한</rt><rp>)</rp></ruby>
<ruby>民<rp>(</rp><rt>민</rt><rp>)</rp></ruby>
<ruby>國<rp>(</rp><rt>국</rt><rp>)</rp></ruby>은
<ruby>民<rp>(</rp><rt>민</rt><rp>)</rp></ruby>
<ruby>主<rp>(</rp><rt>주</rt><rp>)</rp></ruby>
<ruby>共<rp>(</rp><rt>공</rt><rp>)</rp></ruby>
<ruby>和<rp>(</rp><rt>화</rt><rp>)</rp></ruby>
<ruby>國<rp>(</rp><rt>국</rt><rp>)</rp></ruby>이다.

const processRuby = (text) => {
  if (text.includes("{{") && text.includes("^") && text.includes("}}")) {
    splitted = text.split(/{{|}}/);
    const rubified = splitted.map((s) => rubify(s));
    return rubified.join("");
  } else return text;
};

const rubify = (text) => {
  if (text.includes("^^")) {
    caretSplitted = text.split("^^");
    if (caretSplitted[1] === "") {
      caretSplitted[1] = "•".repeat(caretSplitted[0].length);
    }
    caretText = "";
    for (let x = 0; x < caretSplitted[0].length; x++) {
      if (caretSplitted[0][x] !== " ")
        caretText +=
          "<ruby>" +
          caretSplitted[0][x] +
          "<rp>(</rp><rt>" +
          (caretSplitted[1][x] || "") +
          "</rt><rp>)</rp></ruby>";
      else caretText += " ";
    }
    return caretText;
  } else if (text.includes("^")) {
    caretSplitted = text.split("^");
    return (
      "<ruby>" +
      caretSplitted[0] +
      "<rp>(</rp><rt>" +
      caretSplitted[1] +
      "</rt><rp>)</rp></ruby>"
    );
  } else return text;
};

HTML 텍스트 위에 덧말 강조점 쓰기

응용