A page on which to test different html features and their associated CSS.
Paragraphs and their spacing
And now a paragraph?
And another paragraph?
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Hyper links
Lorem ipsum dolor sit amet, Zoho wiki customization notes.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Super and subscripts
It's desirable that superscripts and subscripts are large enough to read, but positioned within the normal line height so as not to spread lines further apart. Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in y = x2 and also y = x2. And so on. Faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Lists
Bulletted list (ul tag) WITHOUT p tags.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi.
- Single para: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Two paras: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Same bulletted lists (ul), but now WITH style-Normal p tags applied to them:
Single para: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Two paras: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Numbered list (ol tag) WITHOUT p-tags
- Single para: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Two paras: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
Tables
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi.
A table caption
| Column head 1 |
Column head 2 |
Column head 3 |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Link inside table Another web dev topic ddipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi.
|
Tests without p tags, with br break tag: Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum.
Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi.
|
|
- List without p tags. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae;
|
|
A single-cell table for testing:
Here is some content
|
And more content
|
Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Software programming code
Some alternatives for programming code:
- Style menu > Formatted
- Insert menu > code
First, method, paste the code into the editor, then select it, and apply Style menu > Formatted text. This method seems to paste each line separated by br tag, as desired. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia
class Cdtd_Child_Element_Node:
def __init__(self, atyp):
self.typ = atyp
self.label = ''
self.multi = '' # ? * +
self.child_tree = []
self.raw_foreign_element = None
self.elideaware_foreign_element = None
self.elides = False
self.visio_er_row = 0
def dump(self, slist, indent):
t = self.typ
s = indentstr(indent) + t.name + prepad(self.label) + prepad(self.multi)
slist.append(s)
for child in self.child_tree:
child.dump(slist, indent + 1)
And now some more text... Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nulla facilisi. Praesent sapien
ligula, aliquet a facilisis eu, mattis ac magna. Aenean elit velit,
vulputate at leo ac, pellentesque interdum diam. Praesent et tortor non
enim ultrices lobortis nec at sem.
Second method: use the Insert > code method. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales porttitor porttitor. Nunc tristique nulla et risus
efficitur interdum. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae.
- class Cdtd_Child_Element_Node:
def __init__(self, atyp):
self.typ = atyp
self.label = ''
self.multi = '' # ? * +
self.child_tree = []
self.raw_foreign_element = None
self.elideaware_foreign_element = None
self.elides = False
self.visio_er_row = 0
- def dump(self, slist, indent):
- t = self.typ
- s = indentstr(indent) + t.name + prepad(self.label) + prepad(self.multi)
- slist.append(s)
- for child in self.child_tree:
- child.dump(slist, indent + 1)
Hmmm, that method places the code into a custom ol (class="code") numbered list. The numbers obviously correspond to li items. Lines that paste in separated by breaks do not create separate li's. For lines 2-8 I explicitly added paragraph breaks (hit Return key). So this can be made to look reasonable, does not seem a fully thought-out feature. Maybe revisit this later.
Uploading ....