Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

簡単レシート印刷 receiptline でテーブルを整えてみた

$
0
0

日本発のオープンソース receiptline でレシート印刷に少しずつトライしています。
まだレシートプリンターがないので、前回利用した開発ツールを引き続き使います。
今回はテーブルの位置と列の幅です。

01.png

列の幅を設定

前回の長い商品名は、行の半分くらいのところで折り返されていました。

冷奴竜田揚げもつ煮込みトリプルセット | 1,280

02.png

商品名の列の幅を広くして、バランスを良くしたいですね。
金額を 8 桁に固定して、残りを商品名に割り当ててみましょう。

{width:*,8}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280

03.png

これは width プロパティというもので、この行以降の列の幅を設定しています。
名前は widthまたは w、値は , or 1つ以上のスペースで区切った桁数列です。
桁数は 0または省略でその列を無視し、*で未設定の桁数を均等に割り当てます。

列の数は固定される

列の幅を設定すると、列の数が固定されます。
列の数が足りないときは空の列が補完され、余るときは無視されます。

3 列目が補完されて、列の数は 3 つに。

{width:*,8,2}
|冷奴       | 380|先 |
|竜田揚げ   | 480|
|もつ煮込み | 580|

04.png

1 列目と 3 列目が無視されて、列の数は 1 つに。

{width:0,*}
|冷奴       | 380|先 |
|竜田揚げ   | 480|
|もつ煮込み | 580|

05.png

列の数を可変に戻したいときは、width プロパティで autoにします。
autoはデフォルト値で、実在する列すべてに *が適用されます。

{width:auto}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280

06.png

テーブルの位置

列の幅に *があるテーブルは、用紙幅にフィットします。
用紙幅より大きなテーブルも無理やり削られてフィットします。

では用紙幅よりも小さなテーブルはどうなるでしょう。

{width:16,8}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280

07.png

テーブルが用紙中央に寄せられました。
用紙の左または右に寄せることもできます。

{width:16,8}

{align:left}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280

{align:right}
冷奴竜田揚げもつ煮込みトリプルセット | 1,280

08.png

これは align プロパティというもので、この行以降のテーブルの位置を設定しています。
名前は alignまたは a、値は left, center, rightです。

次回は、テーブルに罫線を引いてみようと思います。


Viewing all articles
Browse latest Browse all 8691

Trending Articles