HTML テキストの両端揃え

この記事では HTML Justify Text について説明します。 HTML には、Web ページのフロントエンド操作をより魅力的に実行するための別のタグのセットがあります。本来、HTML には段落タグ

があります。 Web 画面に段落文を記述するには、HTML の各セクションを使用します。ユーザー要件に合わせて両端揃えタグが必要な場合は、カスタマイズされ、

を使用する場合はドキュメントを利用します。段落テキスト、またはデータまたはテキスト値を両端揃えの形式に合わせて配置する必要があるものです。両端揃えテキストの左側または右側で異なる場合があります。各テキスト値は、Web ページ内で同じ量の水平スペースを占めます。

構文

HTML には、ブラウザーやユーザーのビューで Web ページをよりカスタマイズ可能で使いやすく、魅力的に強調するための CSS スタイルがあります。 HTML 両端揃えテキスト値は、テキストまたは値と適切な配置で配置されます。デフォルトでは、両端揃えテキストは Web ページの左側に配置されます。 Web ページ内の HTML 位置揃えの一般的な構文を見てみましょう。

HTML の構文:

<p align="justify/left/right/center">
----some  codes----
</p>

CSS の構文:

div
{
text-align:justify/left/right/center;
text-justify:values;
}

上記のコードは、ドキュメント内のテキスト値を両端揃えするための HTML コードの基本構文です。 text-justify プロパティが指定されており、属性値がテキストの位置揃え方法です。text-align を justify で設定する場合、text-justify には auto、inter-word、inter-character、 none、initial、および継承。 auto を使用する場合、各値には異なる説明ロジックのセットが含まれます。ブラウザ自体が位置揃えアルゴリズムを決定します。inter-word: 単語間のスペースを増減します。inter-character: 文字間のスペースを増減します。 none を使用すると、ジャスティフィケーションメソッドが自動的に無効になり、プロパティタグにデフォルト値が初期設定され、プロパティの親要素をその子要素に継承する値が継承されます。

HTML で両端揃えテキストを作成するには?

一般に、正当化テキストは、ユーザーの観点からは異なる一連のものを意味します。 HTML テキストは両側で揃えられるべきであると考えられます。テキスト行が左側と右側の両方で揃えられているため、二重確認が行われる可能性があります。通常はいくつかの整列単語を使用する場合を除いて、テキストのすべての行を整列させることができます。最後の単語は幅と高さが等しいため、これを実現するために使用される方法は通常、必要に応じて単語の間に余分なスペースを残すことです。

このような位置揃え方法は HTML ドキュメントで広く使用されており、印刷で高品質の Web ページを取得するために使用する必須のプロパティは、コンテンツをハードコピー形式で必要とする場合にも適しています。HTML4 以降では、テキスト属性を位置揃えするために使用されます。ただし、構文とセマンティクスは異なりますが、大規模な要素セットの場合です。 HTML で justify を使用すると、ドキュメント内に一部の HTML 要素/タグを使用できるようになります。

、

、

…

、、、 、、 、、 これらは、テキストを両端揃えし、段落を揃えるためのいくつかの要素です。 Web ページ内のドキュメントの重要な部分を

を使用して説明すると、つまり、テキスト値を両端揃えで配置するコードです。 HTML

、

の厳密なバージョンを使用する要素とタグ属性が非推奨になる場合があります。タグは、Web ページの HTML ドキュメントで使用するグループと見出し要素の最初のセットです。

HTML の代わりに XHTML を使用する場合、XHTML は暫定的な dtd にすぎません。

、

、

…

などのタグの値として「justify」を使用することはできません。厳密な dtd では、あらゆる状況で HTML の位置合わせが許可されません。厳密な dtd ドキュメントで justify タグを使用すると、見落としによるエラーが表示されます。これは、バリデーターが align=” justify” コードがエラーであったように値を整列することを意味します。これを両端揃えに使用する場合、余白の両側を両端揃えにすることを意味します。

HTML コードで align=” justify” を使用すると、すべてのブラウザで広くサポートされますが、Opera、IE4、その他のブラウザなどの一部のバージョンでは、Netscape で「unjustified」エラー (左揃え) のようなエラーが表示されます。 。段落タグ

は、配置に関するスタイルシートルールを適用しません。

We will use some CSS options properties like float,inline-block, font styles, positions of the images, breadth, width, and height of the images; similarly, navigation options will do some alignments for the menus in the document; the above all options will use the HTML with CSS options same like justifying options in the document. Suppose we use IE Explorer for running an HTML web page. In that case, it has some nonstandard CSS properties that may affect some methods of justification, like example, “just-textify,” if we use IE version earlier, like 5.5 or later, it also recognizes the properties like text-align-last, it will show the horizontal alignment of the web page.

Examples of HTML Justify Text

We will see some examples of understanding the basics in the HTML justify part.

Example #1

Code:

<p align="justify">Welcome To My Domain.</p>
<p><b>Welcome</b>Users</p>

Output:

Example #2

Code:

<style>
div {
color: green;
border: 3px blue;
}
h1  {
color: initial;
}
</style>


<div>
<p align="justify">Welcome To My Domain.</p>
<p><b>Welcome</b>Users</p>
</div>

Output:

Example #3

Code:

<style>
div {
color: green;
border: 3px blue;
}
h1  {
color: initial;
}
</style>


<div>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543951033739.png?x-oss-process=image/resize,p_40" class="lazy" align="right" alt="HTML テキストの両端揃え"   style="max-width:90%">
<p>Welcome To My Domain.</p>
<p><b>Welcome</b>Users</p>
</div>

Output:

The above three examples will show the justify options in HTML in different ways. The first example will point out the basic notification for using justify option in the document; the second example will use the CSS style for the document will be more attractive from the user’s perspective. The final example will use the jpg image on the right side of the web page; if we declare justify, it will show the image in the default view.

Conclusion

Applying the options in a document, like a web page, will show good quality based on the user requirement, including justification, page breaks, etc. Justification might take some small pieces of text or values presented creatively or primarily for the web page. We should check several validations and conditions to apply and display browser compatibility mode.