開発者ツール · HTML WYSIWYG エディター
HTML では「表示されているもの」が必ずしも「得られるもの」と一致しない理由
· 背景
html css コンテンツ編集可能
HTML は構造を記述し、CSS、デバイス、クライアントが外観を決定するため、WYSIWYG が Web 上の最終結果を近似することしかできない構造的な理由と、そこから生まれた WYSIWYM のアイデアについて説明します。
エディターでは完璧でも、ページでは間違っています — おなじみの不一致で開きます
通知は、ToolAcre 内ではバランスが取れているように見えますが、サイトに入ると混雑しているように見えます。これは、同じ要素が異なるスタイルシートに対応しているためです。ローカル iframe は、独自のフォント、行の高さ、パディング、および明るい配色を備えたドキュメントです。これは検査ビューであり、すべての目的地のスクリーンショットではありません。
したがって、WYSIWYG は Web 上で限定された意味を持ちます。エディターは現在のレンダリング コンテキストを正確に表示できますが、後で「取得するもの」には、ホスト CSS、コンテナーの幅、ブラウザー設定、およびドラフト中に存在しないコンテンツ変換が含まれます。
HTML は外観ではなく構造を説明します。同じマークアップが異なるスタイルシートで異なるレンダリングされることを説明します。
HTML は主に、見出し、段落、リスト、引用、強調、コード、リンクなどの構造と関係を記録します。外観は、ユーザー エージェントのデフォルトと作成者のスタイルがそれらの要素を解釈するときに現れます。 ToolAcre はインライン スタイルとクラス属性を削除し、コピーされたフラグメント内の分離を強化します。
同じ h2 は、デフォルト ページでは大きく、アプリケーション カードではコンパクトに、印刷ではスタイルを変更することができます。たとえ次元が変わっても、その役割は見出しのままです。作成者は、1 つのプレビューに望ましいタイポグラフィがあるかどうかを判断する前に、構造が正しいかどうかを判断する必要があります。
ユーザー エージェント スタイルシートとカスケード — デフォルトのブラウザー スタイルと、エディターのプレビューに表示された内容をサイト CSS がオーバーライドする方法について説明します。
ブラウザは要素のユーザー エージェント ルールから始まり、カスケードを通じてページ スタイルとユーザー設定を適用します。 ToolAcre のプレビュー ドキュメントには、独自の小さなスタイルシートが追加されています。ホスト サイトのデザイン トークンや将来の CMS テーマはインポートされません。
コピーされたマークアップが別のページに入ると、そのページのマージン、リストのインデント、リンクの色、見出しのスケールがすべて変更される可能性があります。解決策は、一時的なプレビュー スタイルをフラグメントにベイクしないことです。このエディターはとにかくそれらを削除するからです。レビューされたプレゼンテーションを宛先に適用し、そこでテストします。
デバイス、ダーク モード、電子メール クライアント — スニペットが満たす多くのレンダリング コンテキストについて説明します
デバイスは、利用可能な幅、フォント メトリック、およびユーザー ズームを変更します。ダークモード テーマは色を変更できますが、ToolAcre はプレビューを意図的にライト ドキュメントに固定します。電子メール クライアントは、このページがエミュレートも検証もしない別の HTML および CSS 制約を課します。
ブラウザーまたはメール クライアントの互換性マトリックスを提供するリポジトリ ソースがないため、この記事では、普遍的な動作を保証するのではなく、定性的にディメンションに名前を付けます。レスポンシブおよび電子メールによるクレームには、実際のサポート環境でのテストが必要です。サンドボックス化された iframe がその証拠の代わりとなることはできません。
WYSIWYM: 表示されているものが意味するもの — LyX などのツールによって普及した構造編集哲学を導入します
構造編集の考え方では、製図面がエンドポイントに正確に似ているかどうかではなく、コンテンツが何を意味するかを問います。見出しレベルは階層を表し、リストはグループ化を表し、強は重要性を表し、リンクは目的地を表します。 CSS は、コンテキストに対してそれらの意味を視覚的に伝えます。
ワークブックはこれを WYSIWYM と呼び、LyX という名前を付けていますが、ここでは入手可能な履歴ソースはありません。コンセプトは、起源や製品の動作を割り当てずに説明できます。最初にセマンティックな意図を作成し、次にコンテンツが実際に存在するプレゼンテーションをプレビューおよび調整します。
実用的な例: 3 つのコンテキスト内の 1 つのスニペット — デフォルトのスタイルシート、サイトのテーマ、および電子メールのプレビューの下で同じマークアップを表示します
h2、p、strong、ul、およびパブリック リンクを使用して 1 つのフラグメントを構築します。ダウンロードしたドキュメントを開いて ToolAcre のライト ラッパーを確認し、コピーしたフラグメントをテーマのテスト ページに貼り付け、承認済みの電子メール プレビューに適合したコピーを配置します。表現は同一にしてください。
3 つのビューは、スタイルとクライアント ルールが異なるため、異なる可能性がありますが、ソース構造は同等のままです。電子メールに表やインライン プレゼンテーションが必要な場合は、別の翻訳になります。 ToolAcre は、ブラウザーのプレビューで受信トレイが検証されたかのように振る舞うのではなく、テーブルとスタイルの両方を削除します。
この内容の内容 — CSS デバッグまたはサイト スタイルを読み込むためのエディターの構成
この記事では、CSS の特異性のデバッグ、サイト スタイルでのエディターの構成、または電子メール マークアップの認証は行いません。また、コピーされた出力が任意の信頼できない出版物に対して安全であるとは主張しません。サニタイザーは、パーサーの差分リスクが文書化された狭いエディター許可リストです。
プレビュー サンドボックスは、ToolAcre 内のスクリプト、フォーム、および同一オリジン アクセスを停止します。コピーされた HTML はそのサンドボックスから残ります。宛先側の衛生管理、必要に応じて CSP、応答性テスト、およびアクセシビリティ チェックを使用します。視覚的な不一致とセキュリティは、公開後に両方とも見えるようになる場合でも、別個の問題です。
要点: 意味を編集し、マークアップを検証する — アプローチと、ToolAcre の HTML WYSIWYG エディターを使用して実際に渡すマークアップに集中する方法をまとめています。
視覚的な同等性を追求する前に、意味を編集し、マークアップを検証します。 ToolAcre は、セマンティック フラグメントとローカル レンダリングを並べて利用できるようにし、不一致が構造に起因するのか、目的のプレゼンテーションに起因するのかを識別するのに役立ちます。
次に、レビューされたフラグメントを代表的なコンテキストに移動し、そこで結果を測定します。優れたワークフローでは、違いを予期し、意図的な適応を記録し、1 つのエディター ビューがすべてのブラウザー、デバイス、テーマ、または受信トレイを予測するという主張を回避します。