文字数ではなくサイズでテキスト領域の入力をエレガントに制限するにはどうすればよいですか。
テキストと画像のユーザー入力をPDF後でレターとして印刷されるページに配置する必要があるWebアプリを構築しています。このページには、テキスト用の指定領域と指定されたフォント。このフォントは可変幅のカスタムフォントになりますが、ユーザーはサイズを変更したり、テキストに書式を適用したりできません。
これまでの私の解決策は、固定の幅と高さのテキスト領域入力を設定し、JavaScriptを使用して、ユーザーがスクロールせずに収まらないほど多くのテキストを入力したことを検出し、テキスト入力を停止してアラートを表示することです。そのテキスト領域でカスタムフォントを使用できるので、レターの限られたスペースに非常に近い概算を取得し、ユーザーがテキストを追加しすぎないようにする必要があります。
さらに複雑なことに、レターの表と裏のページには同じサイズのテキスト領域があり、テキストが裏のページに流れることを示す必要があります。
これが現在機能している編集画面です。これをよりユーザーフレンドリーにする方法についていくつかの提案をお願いできますか？ユーザーはこれを見ると理解できるでしょうか？おそらく数週間以内に正式なユーザーテストを行う予定です。 
ユーザーは、書き込みが完了した後、すべての画像とテキストがページに配置されたレターをプレビューできます。
pdate：以下は、いくつかの提案を考慮した新しいモックアップです。
私はあなたが持っている固定高のテキストエリアが好きです。背景画像を使用して、「ページレイアウトビュー」のように見せることができます。
画像は、textareaを2つの等しいセクションに分割し、各セクションの周りに薄い灰色の境界線を付けるため、各セクションは暗い背景の上に白いページのように見えます。 「表」と「裏」というラベルが付いた各ページに透かしを入れると役立つ場合があります。
ユーザーが2ページ以上の値を入力すると、textareaがスクロールを開始して追加のテキストを表示できるようになります。しかし、そのテキストは裏のページからはみ出して、暗い背景に流れ込みます。
ページレイアウトのメタファーは、言葉を使わなくてもアイデアを十分に伝えることができると思います。ただし、テキストが割り当てられた領域をオーバーフローしても、警告メッセージを追加しても問題はないでしょう。
私はあなたがそこに行っているものが好きです。とてもユニークです。
使用できる他のいくつかのアイデア、または少なくともspark何か：
文字数を超えると、テキストは赤く色付けされます。
すべてのラインが赤のポイントを通過するようにします。
入力時にステータステキストを入力し、状態を3〜4にします。（1。ここにメッセージを入力します。2。（100ワード））それで、スペースが残ります。3。（300ワード）まだ心配しないでください残り200ワード、4（最後から100離れている）注意、残っているのは100文字だけです（そして、100、99、98、87から入力するとカウントダウンします）。
私はあなたがしたことを好きです。
最初に「Getting close」メッセージをポップアップするのはいつですか。残り6本くらいになるといつもでしょうか？インターフェイスを正しく理解している場合、ユーザーがエリアに入力できる文字数は、ユーザーごとに異なります。しかし、予測可能な「しきい値」を選択することは有用だと思います。つまり、ユーザーは常に「ああ、行がX行になると警告が表示されます」と知っています。
「テキスト領域のサイズが変更されました...」というメッセージが新しいモックアップから消えてしまいました-これは素晴らしいインラインフィードバックだと思いました。
小さなメモ-「フロントページ」と「バックページ」の位置がぎこちなく感じます。私はそれらが先頭よりも各ページの半分に揃えられるように、より多くの重さを運ぶかもしれないと思います。私だけかもしれません。
JavaScriptでおおよその行の高さを計算し、「残り約3行」などの制限に近づくと警告を表示することができます。
私はこのアイデアが好きです。これは、正確にWYSIWYGになろうとせずに、最終結果がどのように表示されるかをフィードバックする良い方法です。
私が疑問に思うことの1つ（これはnit-pickingです）は、フィードバックを行数の観点から与えるという考えです。ユーザーは行数ではなく単語数の概念に慣れていると思います（ただし、逸話的な証拠しかありません）。ユーザーが理解しやすくなります。