React アプリケーションの広い範囲で palt-typesetting を使う

この記事の概要

Web での組版は DTP と比べるとどうしても自由度が低いです。

そんな中でも、日本語の組版のアレコレ（和欧混植やツメ組みなど）に対応したライブラリがありました。

サンプルでは特定箇所で使う用のコンポーネントとなっていますが、React アプリケーションの広い範囲で使うとき用のコードについて記事にしました。

1 ページの文字量がかなり多い場合など、どうなるのかは検証していません。
あくまで、まずは広く適用してみたいと思って試した記事です。

最上位のページやレイアウトコンポーネントでの指定

ここではApp.jsxで指定するとします。

App.jsx

import { useEffect } from 'react'
import './App.css'
import Typesetter from 'palt-typesetting'
import 'palt-typesetting/dist/typesetter.css'

function App() {
  useEffect(() => {
    const typesetter = new Typesetter()
    typesetter.renderToSelector('#root')
  }, [])

  return (
    {/* ルーティング設定や children の受け取り */}
  )
}

export default App

最低限としてはこれで完了です。

	通常	palt-typesetting 使用
パターン 1
パターン 2
パターン 3

通常と比べて気持ちのいいアキ量・改行になっていると思います。

自分なりの設定などがある場合はドキュメントにあるのと同様に指定します。

App.jsx

  import { useEffect } from 'react'
  import './App.css'
  import Typesetter from 'palt-typesetting'
  import 'palt-typesetting/dist/typesetter.css'
+ import './global.css'

  function App() {
    useEffect(() => {
      const typesetter = new Typesetter()
      typesetter.renderToSelector('#root')
    }, [])

    return (
      {/* ルーティング設定や children の受け取り */}
    )
  }

  export default App

global.css

.typesetting-wrapper {
  /* 全体にかかるルール */
}

.typesetting-latin {
  /* 英数字だけにかかるルール */
}

/* などなど */

実際に使うなら

DTP か Web かを問わず、文字をすべてツメ組にすることはあまりありません。

あくまで上記の内容はコンポーネントにして一部にだけ適用するのではなく、アプリケーションに広く適用するなら……と思ってコードを書いてみたものです。

実際に使うとしたら、記事ページのうちタイトルや見出しはすべて palt-typesetting を適用、本文はベタ組のまま、などがリアルな範囲かと思います。

見出しに id や class がついているのであればrenderToSelector()でそれを指定すれば OK です。

BudouX との比較

似たようなライブラリとして BudouX を思い浮かべた方もいるかもしれません。

大きめの違いとして感じているのは、BudouX はwbrでの分割のみで、palt-typesetting は分割したテキストをspanで囲っている点です。

自分で色々とカスタムしたい場合は palt-typesetting の方がやりやすいように思っています。