パディングと垂直方向の配置：入力欄やテキストエリアでのテキスト配置を微調整する

4D 21 R5で実現できること

以下のアニメーションは、入力オブジェクトの垂直方向の配置とパディングを組み合わせることで実現できる効果を示しています。

垂直方向の配置

「垂直方向の配置」プロパティが、テキストエリアおよび 入力オブジェクトのフォームエディタのプロパティリストで使用可能になりました。値は「default」、「top」、「middle」、「bottom」の4つです。デフォルトのままにしておくと、この機能導入前と比べてレンダリングは変更されないため、明示的に有効にしない限り、既存のフォームには何の変化もありません。

また、既存の `OBJECT SET VERTICAL ALIGNMENT ` コマンドを使用してプログラムから配置を設定することも可能です。このコマンドの有効な動作範囲が、以下の2つのオブジェクトにも拡張されました：

// 垂直方向の配置
OBJECT SET VERTICAL ALIGNMENT(*; "txtInput";Align center)
$align:=OBJECT GET VERTICAL ALIGNMENT(*; "txtInput")

パディング

フォームエディタのプロパティリストで、 テキストエリアおよび 入力オブジェクトに対して、4つの新しいパディングプロパティが利用可能になりました。 左パディング、右パディング、上パディング、下パディングです

これらのプロパティに加え、内部の余白を正確に制御できる2つの新しいコマンドが利用可能です：OBJECT SET PADDING および OBJECT GET PADDING 。どちらも、ピクセル単位で指定されたtop、bottom、left、right 属性を持つオブジェクトを受け取り（または返します）：

// オブジェクトベースのパディング
OBJECT SET PADDING(*; "txtInput"; {top: 8; right: 12; bottom: 10 left: 5})
$resolvedPadding:=OBJECT GET PADDING(*; "txtInput")
// 必要なパディング属性のみを指定できます。省略された属性はデフォルトで 0 になります。
OBJECT SET PADDING(*; "txtInput"; {top: 8; bottom: 10})
$resolvedPadding :=OBJECT GET PADDING(*; "txtInput")

⚠️注：これらのコマンド はリストボックスオブジェクトでも機能します。top と left のみが考慮され、それぞれ対称的に適用されます（top は上部と下部の両方に、left は左側と右側の両方に適用されます）。

すべてのエントリポイントで一貫した動作

配置やパディングの設定方法（フォームエディタ、フォームのJSON／オブジェクトプロパティ、CSS、または4Dコマンド）にかかわらず、レンダリング結果は同じになります。4D固有のキーに加え、標準のCSSプロパティ名もサポートされています：

#txtInput {
vertical-align: middle;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
}

オブジェクトのサイズが変更されても、配置とパディングは正しく維持されます。フォームエディタでは、オブジェクトのサイズを変更すると、その配置が自動的に再計算されます。実行時には、サイズ変更時に拡大するオブジェクトは、パディングを一定に保ちながら、サイズ変更に合わせて配置を再計算します。

まとめ

これらの新しいコントロールにより、あらゆるフォームを理想的な仕上がりになるよう、より自由に設計できるようになりました。以下の操作が可能になります：

• 「静的テキスト」および「 テキスト入力」オブジェクトについて、垂直方向の配置を「上」、「中央」、「下」、または「既定」から選択できます。
• 上、下、左、右の各辺に個別にパディングを追加できます。
• フォームの作成方法に応じて、フォームエディタ、フォームJSON、CSS、または4Dコマンドを使用できます。

また、既存のフォームについてもご安心ください。これらのプロパティを使用していない場合は、これまでとまったく同じように表示されます。

このトピックについてさらに詳しく知りたい場合は、4Dのドキュメントをご参照ください。ご質問がある場合は、4Dフォーラムをご利用ください。