1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
<html lang="en">
<head>
<style>
.font-serif {
font-family: serif;
}
.font-sans-serif {
font-family: sans-serif;
}
.font-monospace {
font-family: monospace;
}
.font-size-small {
font-size: 0.8em;
}
.font-size-large {
font-size: 1.5em;
}
.font-size-pixels {
font-size: 20px;
}
.font-size-zero {
font-size: 0px;
}
.color-red {
color: red;
}
.color-hex {
color: #008000;
}
.color-blue {
color: rgb(0, 0, 255);
}
.color-rgba {
color: rgba(0, 0, 255, 0.7);
}
.bg-color-yellow {
background-color: yellow;
}
.bg-color-hex {
background-color: #FFFF00;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.strikethrough {
text-decoration: line-through;
}
.strikethrough-underlined {
text-decoration: line-through underline;
}
.superscript {
vertical-align: super;
font-size: smaller;
}
.subscript {
vertical-align: sub;
font-size: smaller;
}
</style>
</head>
<body>
<p class="font-serif">Example Text - Serif Font</p>
<p class="font-sans-serif">Example Text - Sans-Serif Font</p>
<p class="font-monospace">Example Text - Monospace Font</p>
<p class="font-size-small">Example Text - Small Font Size</p>
<p class="font-size-large">Example Text - Large Font Size</p>
<p class="font-size-pixels">Example Text - Font Size in Pixels</p>
<p class="color-red">Example Text - Red Text Color</p>
<p class="color-hex">Example Text - Hex Code Text Color</p>
<p class="color-rgba">Example Text - RGBA Text Color</p>
<p class="bg-color-yellow">Example Text - Yellow Background Color</p>
<p class="bg-color-hex">Example Text - Yellow Background Color (Hex)</p>
<p class="bold">Example Text - Bold Text</p>
<p class="italic">Example Text - Italic Text</p>
<p class="underline">Example Text - Underlined Text</p>
<p class="strikethrough">Example Text - Strikethrough Text</p>
<p>Example Text - <sup class="superscript">Superscripted Text</sup></p>
<p>Example Text - <sub class="subscript">Subscripted Text</sub></p>
<p class="bold italic">Example Text - Bold and Italic</p>
<p class="strikethrough-underlined">Example Text - Underline and Strikethrough</p>
<p class="color-red bold">Example Text - Red and Bold</p>
<p class="font-sans-serif font-size-large color-blue">Example Text - Sans-Serif, Large, Blue</p>
<p class="bg-color-yellow bold italic">Example Text - Yellow Background, Bold, Italic</p>
<p class="font-monospace color-rgba bg-color-hex bold">Example Text - Monospace, RGBA, BG Hex, Bold</p>
<p>Example Text - An <a href="https://www.example.com/">example</a> link</p>
<p>Example Text - Nested <span class="bold">bolded</span> text</p>
<p>Example Text - <span class="italic">Overlapping <span class="bold">text</span> styling</span></p>
<p>Example Text - <span class="italic">Same</span> style <span class="italic">multiple</span> times</p>
<p>Example Text - Consecutive <span class="italic">same</span><span class="italic"> style</span> not merged</p>
<p>Example Text - Mixed <span class="italic">italic, <span class="underline">underline, and <span class="strikethrough-underlined">strikethrough</span></span></span> styles</p>
<p>Example Text - Nested <span class="font-monospace">monospace font</span> text</p>
<p>Example Text - Nested <span class="font-size-pixels">pixel font size</span> text</p>
<p>Example Text - Nested <span class="color-red">red color</span> text</p>
<p>Example Text - Nested <span class="bg-color-yellow">yellow background color</span> text</p>
<p>Example Text - Nested <span lang="zh-TW">繁體中文</span> text</p>
<p>Example Text - Nested <span class="color-red">foreground and <span class="bg-color-yellow">background <span class="italic">colors <span class="font-size-pixels">with</span></span> font</span> <span class="bold">sizes</span> and styles</span></p>
<p>Example Text - Some <span style="background-color: yellow;">background color and <span style="font-style: italic;">italic</span> text</span></p>
<p>Example Text - Empty <span class="bold"></span>style text</p>
<p>Example Text - Empty <a href="https://www.example.com/"></a>link text</p>
<p>Example Text - Nested <span class="font-size-zero">invisible</span> text</p>
<div class="contenteditable-test" contenteditable="true">
<p class="font-monospace">Example ContentEditable - Monospace Font inside a contenteditable</p>
<p class="bold">Example ContentEditable - Bold Text inside a contenteditable</p>
<p class="color-red"><sup class="superscript">Example ContentEditable - Small red superscript inside content editable</sup></p>
<p class="font-serif strikethrough-underlined bold italic font-size-large">Example ContentEditable - Large bold italic strikethrough underlined serif in contenteditable</p>
</div>
</body>
</html>
|
