HTML-Renderer/Source/Demo/Common/TestSamples/12.Text.htm at 237d8efedd0e15a497c227b71bf098dc95c55d95 · ChusoJAP/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>