Text-level elements stylesheet test.

Description

Text-level elements stylesheet test.

この文書はスタイル確認を目的としているため、文章構造を無視してテストケースのための markup が行われています

CSS files

  1. root and universal.css
  2. text-level.css
  3. text-level test.css

a element

<p><a>a in p</a></p>
<a>
<p>p in a</p>
<div><p>p in div in a</p></div>
This is sample text.
</a>

a in p

p in a

p in div in a

This is sample text.

a in heading

This is sample text.

heading in a

This is sample text.

Color theme

theme This is sample text.
Light theme
Dark theme
Current theme

href 属性を持つ a 要素 の中ではコンテンツ生成しないことの確認

b, code, var, samp, kbd, q, cite, ins, del

Emphasis elements

em, strong, small - Emphasis elements in heading element

em in em, strong in strong, small in small

string 要素は heading 要素内では異なる style を持つ

smallで途中で改行が行われる長いテストのための例文としてのいろは歌: いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす

前後に普通のサイズの文字がついているsmallで途中で改行が行われる長いテストのための例文としてのいろは歌: いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすの場合のテスト

s element

Contents that are no longer accurate or no longer relevant.

cite element

The title of a work.

language sample text
default / none
cite, nested cite
english
cite, nested cite
japanese
cite, nested cite

quote element

Quoted from another source.

language

language sample text
default / none
quote, nested quote
english
quote, nested quote
japanese
引用, 二重の引用

q 要素 の中ではコンテンツ生成しないことの確認

b, code, var, samp, kbd, cite, ins, del

dfn element

title 属性を持たない dfn 要素

title 属性を持つ dfn 要素

abbr element

title 属性あり HTMLCSS

title 属性なし HTMLCSS

ruby(るび)

本文に対してルビが長い場合のサンプルとしてのHTML(HyperText Markup Language)と、その逆パターンとしてCascading Style Sheets(CSS)

本文もルビも非常に長い語の例として包括的な経済上の連携に関する日本国とグレートブリテン及び北アイルランド連合王国との間の協定(Agreement between the United Kingdom of Great Britain and Northern Ireland and Japan for a Comprehensive Economic Partnership)

ルビの振り方 HTML code Output
1文字づつ <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby> かん
熟語 <ruby>漢字<rt>かんじ</rt></ruby> 漢字かんじ

data element

<data value='3'>1 + 2</data>

1 + 2

time element

<time>2022-01-01</time>

<time title='令和3年初日の出'>2022-01-01T07:00+09:00</time>

<time datetime='2022-01-01'>令和3年1月1日</time>

<time datetime='2022-01-01T07:00+09:00'>令和3年初日の出</time>

code, var, samp, kbd element

code, var, samp, kbd

code, var, samp, kbd in code.

sup and sub.

x2 + y2 = 1

H2O

i element

A span of text in an otherwise offset from the normal prose in a manner indicating a different quality of text.

b element

A span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance.

language This is sample text.
Default / None

b - b element in heading element

b
nested b
English

b - b element in heading element

b
nested b
Japanese

b - b element in heading element

b
nested b

mark element

A run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

Color theme

theme This is sample text.
Light theme
Dark theme
Current theme

bdi element

A span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.

あいうえお、かきくけこ。 (dir='ltr')

あいうえお、かきくけこ。 (dir='rtl')

bdo element

テキスト方向書式設定コントロール (dir='ltr')

テキスト方向書式設定コントロール (dir='rtl')

span element

段落の中でtitle属性ID 属性などグローバル属性を使用する際に span を使う事がある

段落の中で<span title='title属性を持つspan要素'>title属性</span>や<span id='KMV5L6DH'>ID 属性</span>などグローバル属性を使用する際に `span` を使う事がある

br element

段落の中で
強制改行を行った場合の
表示の確認

wbr element

12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890

12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890

1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890<wbr />1234567890

12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890