text-justify

InternetExplorer独自のプロパティで、text-alignプロパティの値がjustifyであるとき、日本語など、英文以外の文章も均等割り付けすることができます。


ブラウザ

IE3 / IE4 / IE5 / IE5.5 / IE6

▲PageTop

書式

要素[.class名][#id名]{ text-align : justify; text-justify : 値; }

▲PageTop

指定できる値

値 初期値 意味
auto 均等割り付けをブラウザーに依存して行います。
distribute 単語間の半角空白や文字間隔を調節して、均等割り付けを行います。(日本語対応)
distribute-all-lines distributeと同じ均等割り付けを行い、かつ最終行など行幅に満たない文字数であっても、均等割り付けを行います。(日本語対応)
inter-cluster 東南アジアの言語に対して、単語間の半角空白を調節して均等割りを行います。
inter-ideograph 文字間隔調節して均等割り付けを行います。(日本語対応)
inter-word 単語間の半角空白を調整して均等割り付けを行います。
kashida アラビア語に対して、文字の大きさを調節して均等割り付けを行います。
newspaper 英文に最適な均等割り付けを行います。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      .sample1 {
      text-align : justify;
      text-justify : auto;
      }
      .sample2 {
      text-align : justify;
      text-justify : distribute;
      }
      .sample3 {
      text-align : justify;
      text-justify : distribute-all-lines;
      }
      .sample4 {
      text-align : justify;
      text-justify : inter-cluster;
      }
      .sample5 {
      text-align : justify;
      text-justify : inter-ideograph;
      }
      .sample6 {
      text-align : justify;
      text-justify : inter-word;
      }
      .sample7 {
      text-align : justify;
      text-justify : kashida;
      }
      .sample8 {
      text-align : justify;
      text-justify : newspaper;
      }
      #sample th {
      height : 30px;
      text-align : left;
      vertical-align : bottom;
      }
      #sample td {
      background-color : #dcdcdc;
      width : 180px;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <table>
        <tr>
          <th>【auto】</th>
          <th>【distribute】</th>
          <th>【distribute-all-lines】</th>
          <th>【inter-cluster】</th>
        </tr>
        <tr>
          <td class="sample1">abc def ghi jkl mno pqr stu vwx yz<br>あいうえお かきくけこ さしすせそ</td>
          <td class="sample2">abc def ghi jkl mno pqr stu vwx yz<br>あいうえお かきくけこ さしすせそ</td>
          <td class="sample3">abc def ghi jkl mno pqr stu vwx yz<br>あいうえお かきくけこ さしすせそ</td>
          <td class="sample4">abc def ghi jkl mno pqr stu vwx yz<br>あいうえお かきくけこ さしすせそ</td>
        </tr>
        <tr>
          <th>【inter-ideograph】</th>
          <th>【inter-word】</th>
          <th>【kashida】</th>
          <th>【newspaper】</th>
        </tr>
        <tr>
          <td class="sample5">abc def ghi jkl mno pqr stu vwx yz<br>あいうえお かきくけこ さしすせそ</td>
          <td class="sample6">abc def ghi jkl mno pqr stu vwx yz<br>あいうえお かきくけこ さしすせそ</td>
          <td class="sample7">abc def ghi jkl mno pqr stu vwx yz<br>あいうえお かきくけこ さしすせそ</td>
          <td class="sample8">abc def ghi jkl mno pqr stu vwx yz<br>あいうえお かきくけこ さしすせそ</td>
        </tr>
      </table>
    </div>
  </body>
</html>

表示結果

【auto】 【distribute】 【distribute-all-lines】 【inter-cluster】
abc def ghi jkl mno pqr stu vwx yz
あいうえお かきくけこ さしすせそ		 abc def ghi jkl mno pqr stu vwx yz
あいうえお かきくけこ さしすせそ		 abc def ghi jkl mno pqr stu vwx yz
あいうえお かきくけこ さしすせそ		 abc def ghi jkl mno pqr stu vwx yz
あいうえお かきくけこ さしすせそ
【inter-ideograph】 【inter-word】 【kashida】 【newspaper】
abc def ghi jkl mno pqr stu vwx yz
あいうえお かきくけこ さしすせそ		 abc def ghi jkl mno pqr stu vwx yz
あいうえお かきくけこ さしすせそ		 abc def ghi jkl mno pqr stu vwx yz
あいうえお かきくけこ さしすせそ		 abc def ghi jkl mno pqr stu vwx yz
あいうえお かきくけこ さしすせそ

▲PageTop

関連項目

CSS

text-align

▲PageTop

▲