HTML-Renderer/Source/Demo/Common/TestSamples/12.Text.htm at 55b1f82ab05fc8eb4dd517c2e3f6b77a83c19d0a · ArthurHub/HTML-Renderer · GitHub

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
<html>
    <head>
        <title>Text</title>
        <link rel="Stylesheet" href="StyleSheet" />
        <style>
            .right {
                text-align: right;
                border-width: 1px;
                border-style: solid;
                border-color: blue;
            }
        </style>
    </head>
    <body>
        <h2>Case 1</h2>
        <p>
            <font size="5" color="red">Warning:</font>P tags must be closed. In fact all tags with the
            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.
        </p>
        <hr />
        <h2>Text align justify with background colors</h2>
        <p style="text-align: justify">
            <div>
                Lorem ipsum dolor sit amet, <span style="background-color: gold;">consectetur</span> adipisicing
                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.
            </div>
        </p>
        <hr />
        <h2>Right align adjusts</h2>
        <table style="border-spacing: 0px;">
            <tr>
                <td class="right">978</td>
            </tr>
            <tr>
                <td class="right">32</td>
            </tr>
        </table>
        <hr />
        <h2>Transparent text</h2>
        <p style="color: rgba(255, 0, 0, 100)">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec
            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
            elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
        </p>

        <p style="background-color: rgba(255, 215, 0, 50)">
            <div style="color: rgba(0, 255, 0, 140)">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec
                lacus.
            </div>

            <div style="color: rgba(0, 0, 255, 100)">
                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
                elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
            </div>
        </p>
        <p style="background-color: #a33; background-gradient: rgb(255, 215, 0); background-gradient-angle: 0">
            <div style="color: rgba(0, 255, 0, 140)">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer_sagittis_Fusce_elementum_commodo_felis_Vivamus_lacinia_eleifend_libero_Donec
                lacus.
            </div>

            <div style="color: rgba(0, 0, 255, 100)">
                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
                elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
            </div>
        </p>
        <hr />
        <h2>RTL text</h2>
        <p>
            <p style="text-align: right; direction: Rtl;">
                <span>בדיקה של טקסט ימין לשמאל</span>
            </p>
            <p>
                <span dir="rTL" lang="HE">בדיקה של טקסט ימין לשמאל</span> normal text
            </p>
            <p>
                <span>בדיקה של טקסט ימין לשמאל</span> normal text
            </p>
        </p>
    </body>
</html>