setup: unordered and ordered list

ul, ol{
  list-style-position: inside;
}

setup: ul and ol inside content area

main ul >li ul, main ol >li ol,
aside ul >li ul, aside ol >li ol{
  padding-left:0.9em;
}

setup: ul and ol in nav and at the breadcrumbs

nav ul,
section#breadcrumb ul{
  list-style-type: none;
}

pre

setup: pre

pre, code, kbd{
  tab-size:2;
}
pre{
  margin:.5rem 0; padding:1rem 1rem;
  background:rgba(0,0,0,.05);
  white-space:pre-wrap; word-wrap:break-word;
  overflow-x:auto;
}

this is pre

Inline Elements

code

em

df

An a element that links to a dfn element with an abbr represents an instance of the term defined by the dfn element.

samp

jdoe@mowmow:~$ ssh demo.example.com
  Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
  Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
  #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown
  jdoe@demo:~$_

kbd

To make George eat an apple, press Shift+F3

To make George eat an apple, select File|Eat Apple...

quotes

blockquote

blockquote{
  margin-top:0.5em; margin-bottom:0.5em; padding:0.5em 0.75em !important;
  background:#efefef;
  border-left:4px solid #999;
}
/** motification */
blockquote.info{
  background:#d9edf7;
  border-left:4px solid #3a87ad;
}
blockquote.success{
  background:#dff0d8;
  border-left:4px solid #468847;
}
blockquote.warning{
  background:#fcf8e3;
  border-left:4px solid #c09853;
}
blockquote.error{
  background:#f2dede;
  border-left:4px solid #b94a48;
}

Blockquote

INFO Notification blockquote with class

SUCCESS Notification blockquote with class

WARNING Notification blockquote with class

ERROR Notification blockquote with class

description list

setup: df

dd{
  padding-left:1em;
}

Lorem ipsum...

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum...

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

adress

mark

mark // HyperText markup language (HTML)

ins

ins // HyperText markup language (HTML)

del

del // HyperText markup language (HTML)

s

s // HyperText markup language (HTML)

bdi (I hope it fits right.)

This sentence in Arabic is automatically displayed from right to left.

هذه قطعه عربيه صممت للمصممين العرب أو للباحثين عن قطع نصيه عربيه لحين إنهاء تصميماتهم و عرضها علي عملائهم. لقد راعينا فى هذه القطعه محاولة تضمين كافة حروف اللغه العربيه لكى يتسنى للمستخدم رؤية جميع الحروف المستخدمه في اللغه العربيه و قمنا أيضا بضم بعض من الخطوط الجذابه لكى نمكنكم من رؤية القطعه بخطوط عربيه مختلفه.

This sentence in Hebrew is automatically displayed from right to left.

בתוככם בר התפשטו חת מקבלים את זז הוֹצֵא. רב שם נח עת לי. מים תעו אהב הדוקרים חום הקודמות בסיפורי הים. חוט שאל בני קנו תַּחַת לכי קפא נטה גלי. חי הנלהבים מָצְאוּ של דם כי בז רה רץ ממכיריו. הם אי יש נח דם.

ruby (Without knowing how it really has to be placed.)

East Asian Langugae Annotation

大哥Big Brother

2022(Year) 12(Month) 06(Date)

漢 (Kan) 字 (ji)

bdo

Dieser Text wird von links nach rechts gehen.

Dieser Text wird von rechts nach links gehen.

wbr

Here is placed a realy long word, to force the right linebreak it has <wbr> inside: supercalifragilisticexpialidocious_supercalifragilisticexpialidocious

details

details {
  padding:.5rem;
  border:1px solid #444;
}
summary {
  font-weight: bold;
}
details[open] {
  padding:.5rem;
}
details[open] summary {
  margin-bottom:.5rem;
  border-bottom:1px solid #444;
}