1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

簡単レシート印刷 receiptline で罫線を引いてみた

Posted at

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

01.png

列の間隔

前回の例です。右揃えの 380 と左揃えの の間をよく見てください。
文字がくっつかずに 1 文字分空いていますね。

ReceiptLine
|冷奴       | 380|先 |
|竜田揚げ   | 480|   |
|もつ煮込み | 580|   |

02.png

列と列の間には 1 文字分のスペースがあるのです。
このスペースを変更して、2 文字分にしてみましょう。

ReceiptLine
{border:2}
|冷奴       | 380|先 |
|竜田揚げ   | 480|   |
|もつ煮込み | 580|   |

03.png

これは border プロパティというもので、この行以降の列の境界を設定しています。
名前は border または b、値は文字数 (桁数) で 0, 1, 2 です。

罫線を引く

商品明細にヘッダーと水平線を追加して、表を作ってみます。
シンプルな表ができました。

ReceiptLine
|   商品名   |金額|
-------------------
|冷奴        | 380|
|竜田揚げ    | 480|
|もつ煮込み  | 580|

04.png

border プロパティを追加して、値を line にしてみましょう。
罫線付きの表ができました。

ReceiptLine
{border:line}
|   商品名   |金額|
-------------------
|冷奴        | 380|
|竜田揚げ    | 480|
|もつ煮込み  | 580|

05.png

外周線と縦罫線が追加され、水平線がそのまま横罫線に変わりました。
縦罫線で 1 文字分の幅を消費するので、| がそのまま罫線になるイメージですね。

テーブル設定おさらい

テーブルに関係するプロパティを組み合わせてみます。
text, width, align, border プロパティの短縮名を使います。
t で折り返しなし、w で幅を固定、a で右寄せ, b で罫線ありです。

ReceiptLine
{t:nowrap; w:16,8; a:right; b:line}
|商品名|金額|
-
|冷奴竜田揚げもつ煮込みトリプルセット | 1,280|

06.png

次回は、ロゴ画像を作ってみようと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?