文字列のハイライト

React歴2年ちょいではあるものの、珍しいレイアウトが上がってきたので共有したいと思います。

レイアウト

こういうのです。マーカーっぽい表示で！というオーダー付きでした。

実装方法

単純に、MUIのTypographyにこのあたりを設定するだけでOK。

  <Typography
    sx={{
      textDecoration: "underline",
      textDecorationColor: "pink",
      textDecorationThickness: "0.5em",
      textUnderlineOffset: "-0.2em",
      textDecorationSkipInk: "none",
     }}
   >
     HighlightTypography
   </Typography>

詳しく

1. textDecoration、Color：下線の色設定

javascript

textDecoration: "underline",
textDecorationColor: "pink",

まずはtextDecorationとtextDecorationColor。これはいいですね。 文字の下に指定した色（ここではpink）の下線を引いてね、です。

2. underlineOffset：表示位置調整

typescript

textUnderlineOffset: "-0.2em",

offsetは、文字のどの辺に下線を引きたいのかの設定です。 ピンクだと尚更見えづらいのですが、文字に被ってうっすら下線が表示されています。 マイナス値だと文字に被り、プラス値だと文字よりさらに下に表示されます。

3. SkipInk

javascript

textDecorationSkipInk: "none",

SkipInkは、下線が文字と被るときにどう表示するかを設定するものです。 デフォルトはautoが設定されているので、2のように文字と線に区切りができ、下線が後ろに回り込んでいるように見えます。 今回のオーダーは「マーカーっぽく」なので、文字の上に線を引きたいので、noneを設定します。

4. Thickness

javascript

textDecorationThickness: "0.5em",

thicknessは、英単語的には「厚さ」を意味するようです。ここではunderlineの太さを設定して完成です。

終わりに

MUIのTypographyを使えばこうですが、CSSでも再現できます。

楽しいハイライトを！