Skip to content

Commit 2ecdc19

Browse files
jhaygood86eXpl0it3r
jhaygood86
authored and
eXpl0it3r
committed
Replace custom CSS with standards
The Demo app depending on 2 HTML-Renderer extensions for background gradients and border radius. This ports a minimal version of the CSS spec compliant versions from PeachPDF
1 parent 65b35ed commit 2ecdc19

28 files changed

Lines changed: 1183 additions & 440 deletions

‎Source/Demo/Common/DemoUtils.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ public static string GetStylesheet(string src)
7474
a:link { text-decoration: none; }
7575
a:hover { text-decoration: underline; }
7676
.gray { color:gray; }
77-
.example { background-color:#efefef; corner-radius:5px; padding:0.5em; }
78-
.whitehole { background-color:white; corner-radius:10px; padding:15px; }
77+
.example { background-color:#efefef; border-radius:5px; padding:0.5em; }
78+
.whitehole { background-color:white; border-radius:10px; padding:15px; }
7979
.caption { font-size: 1.1em }
8080
.comment { color: green; margin-bottom: 5px; margin-left: 3px; }
8181
.comment2 { color: green; }";

‎Source/Demo/Common/Samples/00.Intro.htm‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Intro</title>
55
<link rel="Stylesheet" href="StyleSheet">
66
</head>
7-
<body style="background-color: #333; background-gradient: #707; background-gradient-angle: 60; margin: 0;">
7+
<body style="background-image: linear-gradient(60deg, #333, #707); margin: 0;">
88
<h1 align="center" style="color: white">
99
HTML Renderer Project - $$Platform$$
1010
<br />

‎Source/Demo/Common/Samples/07.Additional features.htm‎

Lines changed: 36 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,18 @@
66
<style>
77
<!--
88
.g1, .g2, .g3, .g4, .g5 {
9-
background-color: red;
10-
background-gradient: yellow;
119
padding: 22px;
1210
}
1311

14-
.g1 { background-gradient-angle: 0; }
12+
.g1 { background-image: linear-gradient(0deg, red, yellow); }
1513

16-
.g2 { background-gradient-angle: 45; }
14+
.g2 { background-image: linear-gradient(45deg, red, yellow); }
1715

18-
.g3 { background-gradient-angle: 90; }
16+
.g3 { background-image: linear-gradient(90deg, red, yellow); }
1917

20-
.g4 { background-gradient-angle: 135; }
18+
.g4 { background-image: linear-gradient(135deg, red, yellow); }
2119

22-
.g5 { background-gradient-angle: 180; }
20+
.g5 { background-image: linear-gradient(180deg, red, yellow); }
2321

2422
.c1, .c2, .c3, .c4, .c5 {
2523
background-color: olive;
@@ -28,16 +26,16 @@
2826
vertical-align: middle;
2927
}
3028

31-
.c1 { corner-radius: 0px; }
29+
.c1 { border-radius: 0px; }
3230

33-
.c2 { corner-radius: 10px; }
31+
.c2 { border-radius: 10px; }
3432

35-
.c3 { corner-radius: 0px 10px 10px 0px; }
33+
.c3 { border-radius: 0px 10px 10px 0px; }
3634

37-
.c4 { corner-radius: 18px; }
35+
.c4 { border-radius: 18px; }
3836

3937
.c5 {
40-
corner-radius: 10px;
38+
border-radius: 10px;
4139
border: outset #BBBB00 2px;
4240
}
4341

@@ -60,24 +58,17 @@ <h1>
6058
<h2>
6159
Graphic features</h2>
6260
<p>
63-
I have always wanted the W3C to add this features to the CSS spec (and so far, not
64-
there yet :)</p>
61+
Standard CSS backgrounds and border radii, same as any modern browser.</p>
6562
<ul>
6663
<li><b>Gradients on backgrounds</b></li>
6764
<li><b>Rounded corners</b></li>
6865
</ul>
69-
<p>
70-
And I think many many web designers would agree. Is it so hard or what?.</p>
7166
<h3>
7267
Background Gradients</h3>
7368
<p>
74-
It is a simple two color linear gradient, achieved by the adding of two CSS properties:</p>
75-
<ol>
76-
<li><code>background-gradient: (#Color)</code> - Second color of the gradient background,
77-
the first one is given by <code>background-color</code>. Not inherited.</li>
78-
<li><code>background-gradient-angle: (number)</code> - Angle (in degrees, clockwise) of
79-
the gradient. Not inherited. Initial value:90</li>
80-
</ol>
69+
A <code>background-image</code> can be a <code>linear-gradient()</code> (or
70+
<code>repeating-linear-gradient()</code>) function: an angle or <code>to &lt;side&gt;</code>
71+
direction, followed by two or more comma-separated color stops.</p>
8172
<b>Some examples</b>
8273
<!-- Gradients table -->
8374
<table width="300px">
@@ -95,19 +86,19 @@ <h3>
9586
</tr>
9687
<tr>
9788
<td>
98-
0 degrees
89+
0deg
9990
</td>
10091
<td>
101-
45 degrees
92+
45deg
10293
</td>
10394
<td>
104-
90 degrees
95+
90deg
10596
</td>
10697
<td>
107-
135 degrees
98+
135deg
10899
</td>
109100
<td>
110-
180 degrees
101+
180deg
111102
</td>
112103
</tr>
113104
</table>
@@ -120,18 +111,18 @@ <h3>
120111
website you visit nowadays makes use of rounded corners, where a not very nice trick
121112
with images and tables must be used.</p>
122113
<p>
123-
In this renderer, the rounded corners are achieved by adding this CSS properties:</p>
114+
In this renderer, the rounded corners are achieved with the standard CSS properties:</p>
124115
<ul>
125-
<li><code>corner-ne-radius: (length)</code> Indicates the radius of the north-east corner.
126-
Not ineritted</li>
127-
<li><code>corner-se-radius: (length)</code> Indicates the radius of the south-east corner.
128-
Not ineritted</li>
129-
<li><code>corner-sw-radius: (length)</code> Indicates the radius of the south-west corner.
130-
Not ineritted</li>
131-
<li><code>corner-nw-radius: (length)</code> Indicates the radius of the north-west corner.
132-
Not ineritted</li>
133-
<li><code>corner-radius: (length){1,4}</code> Shorthand for the other corner properties.
134-
Not ineritted</li>
116+
<li><code>border-top-left-radius: (length){1,2}</code> Indicates the radius of the top-left
117+
corner. Not inherited</li>
118+
<li><code>border-top-right-radius: (length){1,2}</code> Indicates the radius of the top-right
119+
corner. Not inherited</li>
120+
<li><code>border-bottom-right-radius: (length){1,2}</code> Indicates the radius of the bottom-right
121+
corner. Not inherited</li>
122+
<li><code>border-bottom-left-radius: (length){1,2}</code> Indicates the radius of the bottom-left
123+
corner. Not inherited</li>
124+
<li><code>border-radius: (length){1,4} [ / (length){1,4} ]?</code> Shorthand for the other
125+
corner properties, with an optional "/" for elliptical corners. Not inherited</li>
135126
</ul>
136127
<!-- Corners table -->
137128
<b>Some examples</b>
@@ -161,11 +152,11 @@ <h3>
161152
</tr>
162153
</table>
163154
<pre>.c1, .c2, .c3, .c4, .c5 { background-color:olive; border:0px; color:white; vertical-align:middle; }
164-
.c1 { corner-radius: 0px }
165-
.c2 { corner-radius: 10px }
166-
.c3 { corner-radius: 0px 10px 10px 0px }
167-
.c4 { corner-radius: 18px }
168-
.c5 { corner-radius: 10px; border: outset #bb0 2px; }</pre>
155+
.c1 { border-radius: 0px }
156+
.c2 { border-radius: 10px }
157+
.c3 { border-radius: 0px 10px 10px 0px }
158+
.c4 { border-radius: 18px }
159+
.c5 { border-radius: 10px; border: outset #bb0 2px; }</pre>
169160
</blockquote>
170161
</body>
171-
</html>
162+
</html>

‎Source/Demo/Common/Samples/08.Tooltip.htm‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,8 @@ <h2>Default tooltip style</h2>
2222
<pre>
2323
.htmltooltip {
2424
border:solid 1px #767676;
25-
background-color:white;
26-
background-gradient:#E4E5F0;
27-
padding: 8px;
25+
background-color:#E4E5F0;
26+
padding: 8px;
2827
Font: 9pt Tahoma;
2928
}</pre>
3029
<h2>Examples</h2>

‎Source/Demo/Common/TestSamples/12.Text.htm‎

Lines changed: 79 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,79 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Text</title>
5-
<link rel="Stylesheet" href="StyleSheet">
6-
<style>
7-
.right {
8-
text-align: right;
9-
border-width: 1px;
10-
border-style: solid;
11-
border-color: blue;
12-
}
13-
</style>
14-
</head>
15-
<body>
16-
<h2>Case 1</h2>
17-
<p>
18-
<font size="5" color="red">Warning:</font>P tags must be closed. In fact all tags with the
19-
end tag <a href="http://www.w3.org/TR//REC-html401-19991224/index/elements.html">marked as optional</a>, must be closed. It may be fixed by next release.
20-
</p>
21-
<hr />
22-
<h2>Text align justify with background colors</h2>
23-
<p style="text-align: justify">
24-
Lorem ipsum dolor sit amet, <span style="background-color: gold;">consectetur</span> adipisicing
25-
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore magna aliqua incididunt ut labore et dolore magna aliqua.
26-
</p>
27-
<hr />
28-
<h2>Right align adjusts</h2>
29-
<table style="border-spacing: 0px;">
30-
<tr>
31-
<td class="right">978</td>
32-
</tr>
33-
<tr>
34-
<td class="right">32</td>
35-
</tr>
36-
</table>
37-
<hr />
38-
<h2>Transparent text</h2>
39-
<p style="color: rgba(255, 0, 0, 100)">
40-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec
41-
lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
42-
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
43-
</p>
44-
45-
<p style="background-color: rgba(255, 215, 0, 50)">
46-
<span style="color: rgba(0, 255, 0, 140)">
47-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec
48-
lacus.
49-
</span>
50-
<br />
51-
<span style="color: rgba(0, 0, 255, 100)">
52-
Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
53-
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
54-
</span>
55-
</p>
56-
<p style="background-color: #a33; background-gradient: rgb(255, 215, 0); background-gradient-angle: 0">
57-
<span style="color: rgba(0, 255, 0, 140)">
58-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer_sagittis_Fusce_elementum_commodo_felis_Vivamus_lacinia_eleifend_libero_Donec
59-
lacus.
60-
</span>
61-
<br />
62-
<span style="color: rgba(0, 0, 255, 100)">
63-
Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
64-
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
65-
</span>
66-
</p>
67-
<hr />
68-
<h2>RTL text</h2>
69-
<p style="text-align: right; direction: Rtl;">
70-
<span>בדיקה של טקסט ימין לשמאל</span>
71-
</p>
72-
<p>
73-
<span dir="rTL" lang="HE">בדיקה של טקסט ימין לשמאל</span> normal text
74-
</p>
75-
<p>
76-
<span>בדיקה של טקסט ימין לשמאל</span> normal text
77-
</p>
78-
</body>
79-
</html>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Text</title>
5+
<link rel="Stylesheet" href="StyleSheet">
6+
<style>
7+
.right {
8+
text-align: right;
9+
border-width: 1px;
10+
border-style: solid;
11+
border-color: blue;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<h2>Case 1</h2>
17+
<p>
18+
<font size="5" color="red">Warning:</font>P tags must be closed. In fact all tags with the
19+
end tag <a href="http://www.w3.org/TR//REC-html401-19991224/index/elements.html">marked as optional</a>, must be closed. It may be fixed by next release.
20+
</p>
21+
<hr />
22+
<h2>Text align justify with background colors</h2>
23+
<p style="text-align: justify">
24+
Lorem ipsum dolor sit amet, <span style="background-color: gold;">consectetur</span> adipisicing
25+
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore magna aliqua incididunt ut labore et dolore magna aliqua.
26+
</p>
27+
<hr />
28+
<h2>Right align adjusts</h2>
29+
<table style="border-spacing: 0px;">
30+
<tr>
31+
<td class="right">978</td>
32+
</tr>
33+
<tr>
34+
<td class="right">32</td>
35+
</tr>
36+
</table>
37+
<hr />
38+
<h2>Transparent text</h2>
39+
<p style="color: rgba(255, 0, 0, 100)">
40+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec
41+
lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
42+
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
43+
</p>
44+
45+
<p style="background-color: rgba(255, 215, 0, 50)">
46+
<span style="color: rgba(0, 255, 0, 140)">
47+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec
48+
lacus.
49+
</span>
50+
<br />
51+
<span style="color: rgba(0, 0, 255, 100)">
52+
Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
53+
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
54+
</span>
55+
</p>
56+
<p style="background-image: linear-gradient(to right, #a33, rgb(255, 215, 0))">
57+
<span style="color: rgba(0, 255, 0, 140)">
58+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer_sagittis_Fusce_elementum_commodo_felis_Vivamus_lacinia_eleifend_libero_Donec
59+
lacus.
60+
</span>
61+
<br />
62+
<span style="color: rgba(0, 0, 255, 100)">
63+
Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
64+
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
65+
</span>
66+
</p>
67+
<hr />
68+
<h2>RTL text</h2>
69+
<p style="text-align: right; direction: Rtl;">
70+
<span>בדיקה של טקסט ימין לשמאל</span>
71+
</p>
72+
<p>
73+
<span dir="rTL" lang="HE">בדיקה של טקסט ימין לשמאל</span> normal text
74+
</p>
75+
<p>
76+
<span>בדיקה של טקסט ימין לשמאל</span> normal text
77+
</p>
78+
</body>
79+
</html>

‎Source/Demo/Common/TestSamples/16.Borders.htm‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
<div style="padding: 5px; border: 3px solid red">
1212
simple border 3px
1313
</div>
14-
<div style="padding: 5px; border: 1px solid black; corner-radius: 5px;">
15-
border 1px with corner-radius 5px
14+
<div style="padding: 5px; border: 1px solid black; border-radius: 5px;">
15+
border 1px with border-radius 5px
1616
</div>
17-
<div style="padding: 5px; border: 2px solid black; corner-radius: 10px;">
18-
border 2px with corner-radius 10px
17+
<div style="padding: 5px; border: 2px solid black; border-radius: 10px;">
18+
border 2px with border-radius 10px
1919
</div>
2020
<div style="padding: 5px; border: 1px dotted blue;">
2121
dotted border 1px
@@ -26,8 +26,8 @@
2626
<div style="padding: 5px; border: 1px dashed darkred;">
2727
dashed border 1px
2828
</div>
29-
<div style="padding: 5px; border: 2px dashed darkred; corner-radius: 10px;">
30-
dashed border 2px with corner-radius 10px
29+
<div style="padding: 5px; border: 2px dashed darkred; border-radius: 10px;">
30+
dashed border 2px with border-radius 10px
3131
</div>
3232
</div>
3333
</body>

0 commit comments

Comments
 (0)