【CSS, JS】円や四角形の辺上にテキストを配置する

概要

CSS, JavaScriptを使用して、円や四角形の辺上にテキストを配置します。

円上にテキストを配置

JS側でfor文を使ってテキストを一文字ごとに生成し、テキストの文字数を参考にテキスト配置の間隔・角度を、DOMのwidthを参考に中心点や位置、角度を計算して入れています。

四角形上にテキストを配置

四角形のDOMのwidthとheightを参考に、周の長さやテキストを配置する間隔、一辺に配置する文字数などを計算し、テキストを一文字ごとに生成して、位置・傾きをつけています。

ちなみにfontSize / 2を足したり引いたりしているのは、4隅で文字が重なってしまう部分があったため、一辺の位置を広めに調整している記述です。お好みで書き換えてください。

if (i < textPerWidth) {
  x = i * (widthLength / textPerWidth);
  y = -fontSize / 2; // @@@
  rotate = 0;
} else if (i < textPerWidth + textPerHeight) {
  x = widthLength + fontSize / 2; // @@@
  y = (i - textPerWidth) * (heigthLength / textPerHeight);
  rotate = 90;
  ...