CSSで無理矢理均等割り付け

HTMLで帳票を出力する場合に、均等割り付け(両端揃え)にしたくなった場合の対策です。

仕様を変える

developer.mozilla.orgのサイトに「両端揃えにするべきではありません」とあります。
諦めましょう。
帳票をユニバーサルデザインに近付ける良い機会です。

「様式」と呼ばれる帳票の場合でも、均等割り付けの再現までは求められていない場合があります。
諦めましょう。
労働基準法施行規則 第59条の2
https://elaws.e-gov.go.jp/document?lawid=322M40000100023#Mp-At_59_2

CSSで対応する

「対象期間中の総労働日数」という文字列を、「中の」の後で確実に改行して、均等割り付けさせたいという要望があるとします。

下記4点はそれぞれ異なる方法を使った結果のサンプルです。

①	対象期間中の 総労働日数	246日
②	対象期間中の 総労働日数	246日
③	対象期間中の 総労働日数	246日
④	対象期間中の 総労働日数	246日

①text-align:justify;

<td style="text-align:justify;">
    対象期間中の<br>総労働日数
</td>

この帳票の場合は任意の場所で改行させているため、望んだ通りの結果になりません。任意の場所で改行させなければ、均等割り付けが行われますが、最終行だけは均等割り付けの対象になりません。

②text-align-last:justify;

<td style="text-align-last:justify;">
    対象期間中の<br>総労働日数
</td>

最終行は意図したとおりの結果になりますが、1行目がうまく均等割り付けになっていません。

③強制的に行分割

<td>
    <div style="text-align-last:justify;">対象期間中の</div>
    <div style="text-align-last:justify;">総労働日数</div>
</td>

text-align-last:justify;を使えば最終行だけは均等割り付けが行われます。
なので、強制的に1行ずつに分割すれば意図した通りに均等割り付けできます。

④1文字ずつ分割

<td style="">
    <span style="display: flex; justify-content: space-between;"><span>対</span><span>象</span><span>期</span><span>間</span><span>中</span><span>の</span></span>
    <span style="display: flex; justify-content: space-between;"><span>総</span><span>労</span><span>働</span><span>日</span><span>数</span></span>
</td>

1文字ずつspanで囲んで、Flexで均等割り付けのように見せる方法です。

エピソード

勤怠管理システムを自作する過程で、
「様式第4号(第12条の4第6項関係) 1年単位の変形労働時間制に関する協定届」
などの帳票出力機能を作ることになりました。
レイアウト作成の際は、厚生労働省のサイトにあるサンプルをできる限り再現する方針で進めました。

均等割り付けを再現しようと悩んだ結果がこれです。