プレイグラウンド

MDNのドキュメントのように、帳票テンプレートのYAMLを変更すると見た目がその場で変わります。デモの数はまだ少ないですが、順に増やしていきます。

以下のデモはすべて で動いています。公開済みのリリースそのもので、インストールして手元で動かすものと同じバージョンです。

テキストスタイル

スタイルは、CSSとほぼ同じ書き方にしてあります。text-alignがtextAlignになる、といった違いはあります。ここではtextAlign、fontSize、lineHeight、letterSpacingをコントロールで変えられます。ボックスの高さはfontSize × lineHeightから計算され、高さを固定したボックスがこの値より低いとtext_overflowの警告が出ます。この挙動はリファレンスにも書いてありますが、ここでは実際に動かして確かめられます。

flexレイアウト

CSSのflexの仕組みはご存知でしょうか。

.row { display: flex; gap: 8px; }
.row > div { flex: 1; }  /* 幅を書かない子が等分 */

Shojikuでは、ほぼ同じ仕組みでレイアウトを組むことができます。flex行では、幅を書かなかった子が残り幅を等分します。3カラムを作るプロパティはなく、幅を書かない子を3つ置くと3カラムになります。子の数とgapを変えて確かめてください。

幅を書いた子と、書かない子を混ぜることもできます。次の例では、左の1つだけwを指定していて、残りの2つが余った幅を等分します。左の幅を動かすと、右の2つが同じだけ狭くなります。

フォント

書体は、styleのfontFamilyで指定します。指定できるのは、フォントパックとしてインストールしてある書体だけです。このページには、BIZ UDPゴシックとNoto Sans Monoのパックが読み込まれています。コントロールを動かすと、ラテン文字の行のfontFamilyが切り替わります。日本語の行はfontFamilyの指定なしで、ロケール既定のBIZ UDPゴシックのままです。自分のフォントをパックとして追加する手順は、チュートリアルにあります。

文字マスと縦書き

原稿用紙のような文字マスを作るchar_gridのデモです。writingModeはスタイルではなくアイテム直下のキーで、vertical_rlにすると文字が縦に並び、行は右から左へ進みます。セルの大きさはgrid.cellSizeで指定します。

リファレンスへ

ここには、動かすと分かりやすい代表的なプロパティだけを置いています。全プロパティの一覧はリファレンス（機能ごとに1ページ）にあります。