Highlighting Lyrics with CSS Selectors

Jeremy Gao

The Honey Drink Song

はちみーのうた

はちみーはちみーはちみー
蜂蜜蜂蜜蜂蜜
Honey Honey Honey
Hachimī hachimī hachimī
はちみーをなめると
只要喝了蜂蜜特饮的话
If you drink the honey drink
Hachimī o nameru to
あしがーあしがーあしがー
脚步脚步脚步
Your steps your steps your steps
Ashi gā ashi gā ashi gā
はやくーなる
就会变轻快
Will go faster
Hayakū naru

I used CSS selectors in my TFVIndex site for highlighting companies operating in a prefecture and companies’ operation range. This earlier blog post from OverflowCat shows that selectors can be used to implement multilingual translation highlighting. The song above is my implementation using a different piece of text and build method.

Typst Source

#html.style(
  (
    for idx in range(6) {
      (".line:has(.word-" + str(idx) + ":hover) .word-" + str(idx),)
    }
  ).join(",\n")
    + " {
background-color: #ff05;
text-decoration-thickness: 5px;
}",
)

#let colours = (
  "decoration-[#00AEEF]", // C
  "decoration-[#EC008C]", // M
  "decoration-[#FCBA03]", // Y
  "decoration-black dark:decoration-[#FFF]", // K
)

#html.div(class: "mx-auto w-fit my-15",
  html.hgroup(
    html.h2(class: "mx-auto w-fit mb-1")[The Honey Drink Song]
    + html.p(class: "mx-auto w-fit font-sans", lang: "ja")[はちみーのうた]
  )
  + for line in dict {
  html.div(class: "line my-8", for (lang, words) in line {
    let words = for (idx, word) in words {
      let colour = colours.at(calc.rem(idx, colours.len()))
      (html.span(
        class:
          colour +
          " transition-all decoration-2 underline-offset-4 underline word-" +
          str(idx),
        lang: lang,
        word
      ),)
    }
    if lang in ("ja", "zh") {
      // C and J don't use spaces
      words.join(html.span(class: "inline-block w-1"))
    } else {
      // weird language. use spaces instead
      words.join(" ")
    }
    linebreak()
  })
})