日本発のオープンソース receiptline でレシート印刷に少しずつトライしています。
まだレシートプリンターがないので、前回利用した開発ツールを引き続き使います。
今回はテーブルの位置と列の幅です。
列の幅を設定
前回の長い商品名は、行の半分くらいのところで折り返されていました。
ReceiptLine
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
商品名の列の幅を広くして、バランスを良くしたいですね。
金額を 8 桁に固定して、残りを商品名に割り当ててみましょう。
ReceiptLine
{width:*,8}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
これは width プロパティというもので、この行以降の列の幅を設定しています。
名前は width または w、値は , or 1つ以上のスペースで区切った桁数列です。
桁数は 0 または省略でその列を無視し、* で未設定の桁数を均等に割り当てます。
列の数は固定される
列の幅を設定すると、列の数が固定されます。
列の数が足りないときは空の列が補完され、余るときは無視されます。
3 列目が補完されて、列の数は 3 つに。
ReceiptLine
{width:*,8,2}
|冷奴 | 380|先 |
|竜田揚げ | 480|
|もつ煮込み | 580|
1 列目と 3 列目が無視されて、列の数は 1 つに。
ReceiptLine
{width:0,*}
|冷奴 | 380|先 |
|竜田揚げ | 480|
|もつ煮込み | 580|
列の数を可変に戻したいときは、width プロパティで auto にします。
auto はデフォルト値で、実在する列すべてに * が適用されます。
ReceiptLine
{width:auto}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
テーブルの位置
列の幅に * があるテーブルは、用紙幅にフィットします。
用紙幅より大きなテーブルも無理やり削られてフィットします。
では用紙幅よりも小さなテーブルはどうなるでしょう。
ReceiptLine
{width:16,8}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
テーブルが用紙中央に寄せられました。
用紙の左または右に寄せることもできます。
ReceiptLine
{width:16,8}
{align:left}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
{align:right}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280
これは align プロパティというもので、この行以降のテーブルの位置を設定しています。
名前は align または a、値は left, center, right です。
次回は、テーブルに罫線を引いてみようと思います。