Embellish Text. Some Examples

Posted by Phil Chett on 20 Jul 2007 09:16, last edited by Helmut_pdorf on 23 Jun 2020 11:19

Tags: embellish font html layout size style text

rating: +15+x

Some example of how to embellish your text in your wiki. These have all been swiped from the forums, to put them all in one place. Please feel free to add more.

Text Size

Size of text in a Page can be changed using the SIZE tag

[[size 200%]]200% of Normal Size[[/size]]
[[size 80%]]80% of Normal Size[[/size]]
[[size 50%]]50% of Normal Size[[/size]]

200% of Normal Size
80% of Normal Size
50% of Normal Size.


Author:

GoonGoon. Please visit his/her userPage.

Text Size 2

[[size //size-value//]] … [[/size]]
where //size-value// can be: small, x-small, xx-small, large, x-large, xx-large, smaller, larger

[[size xx-large]]Sample xx-large text[[/size]]
[[size x-large]]Sample x-large text[[/size]]
[[size large]]Sample large text[[/size]]
[[size larger]]Sample larger text[[/size]]
Sample regular text
[[size smaller]]Sample smaller text[[/size]]
[[size small]]Sample small text[[/size]]
[[size x-small]]Sample x-small text[[/size]]
[[size xx-small]]Sample xx-small text[[/size]]

Sample xx-large text
Sample x-large text
Sample large text
Sample larger text
Sample regular text
Sample smaller text
Sample small text
Sample x-small text
Sample xx-small text


Copied and extended by

gerdamigerdami. Please visit his/her userPage.

from post http://community.wikidot.com/forum/t-514/font-size-and-color#post-926.


Horizontal wide lines

Just put this code where you want the horizontal line:

[[div style="border-bottom: 1px solid #666;"]]
[[/div]]

which gives this:

To make the line lighter, just change the #666 to #777 (or #888 or higher).

[[div style="border-bottom: 1px solid #888;"]]
[[/div]]

gives:

Likewise, to make the line darker, just change the #666 to #555 (or #444 or lower).

[[div style="border-bottom: 1px solid #444;"]]
[[/div]]

gives:

You can also make the line thicker by changing the 1px to higher numbers:

[[div style="border-bottom: 2px solid #666;"]]
[[/div]]

gives:

From post
http://community.wikidot.com/forum/t-24928/horizontal-line-question#post-209918
Author:

James KanjoJames Kanjo. Please visit his/her userPage.

More Wide Lines

Using multiple divs can enhance the lines to be more stylish, and different attributes can have different effects. Here are a few examples.

You can make compound lines with two divs.

[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]

This code produces:

You can create decorative lines by mixing in the dashed and dotted line types. You might also try inset and outset.

[[div style="border-bottom:1px dashed #777;"]]
[[/div]]
[[div style="border-bottom:1px dotted #777;"]]
[[/div]]
[[div style="border-bottom:1px dashed #777;"]]
[[/div]]

This makes:

You can produce a gradient effect by changing the colors gradually for each line.

[[div style="border-bottom:1px solid #222;"]]
[[/div]]
[[div style="border-bottom:1px solid #444;"]]
[[/div]]
[[div style="border-bottom:1px solid #666;"]]
[[/div]]
[[div style="border-bottom:1px solid #888;"]]
[[/div]]
[[div style="border-bottom:1px solid #AAA;"]]
[[/div]]

This makes:

Experimenting with margin allows for creative designs.

[[div style="border-bottom:1px solid #555; margin:0 2em 1px 2em;"]]
[[/div]]
[[div style="border-bottom:1px solid #777; margin:0 0 1px 0;"]]
[[/div]]
[[div style="border-bottom:1px solid #999; margin:0 2em 0 2em;"]]
[[/div]]

The code produces:

You can nest divs within each other.

[[div style="border:1px solid #777; padding:1px 2em 1px 2em;"]]
[[div style="border-bottom:1px solid #444;"]]
[[/div]]
[[/div]]

This code renders:

There are many other things you can do, like experiment with colors for example.

Author:

Timothy FosterTimothy Foster. Please visit his/her userPage.

Greater Lines

The trick is to "hide" the 4 minus / which are translated ( parsed) to a line (and have the function of "div" style=clear,both)
with including them in 2 @ :

[[size 150%]]@@-----------@@[[/size]]

[[size 120%]]@@----@@[[/size]]

[[size 120%]]=======[[/size]]

[[size 180%]]@@-----------@@[[/size]]

[[size 180%]]=======[[/size]]

[[div style="font-size:300%;color:#F00;font-family:Comic Sans, Comic Sans MS,cursive;"]]
@@-----------------------------@@
[[/div]]

[[div style="font-size:150%;color:#0F0;font-family:Comic Sans, Comic Sans MS,cursive;"]]
@@-----------------------------@@
[[/div]]
[[div style="font-size:150%;color:#00F;font-family:Comic Sans, Comic Sans MS,cursive;"]]
@@=======================@@
[[/div]]

-----------

----

=======

-----------

=======

-----------------------------

-----------------------------

=======================

Change Font

Use the

[[div style="font-family:Arial Narrow"]] to change the font in a block of text[[/div]]:-

to change the
font in a
block of text

Note, there are only so many fonts supported.

If you want to change the font of a few words in a line of text, then you need to use

[[span style="font-family: Arial Black;"]]Your text [[/span]]

You can also change the font size using the "font size" attribute

[[span style="font-family: Arial Black; font-size: 140%;"]] your text [[/span]]

michal-frackowiakmichal-frackowiak. Please visit his/her userPage.


Headings

+++ Example header 3 gives:

Example header 3

+++ **Example header 3 bold** ( makes no difference to section-"header") gives:

Example header 3 bold

+++ //Example header 3 italic// gives:

Example header 3 italic

+++ **//Example header 3 italic bold//** gives:

Example header 3 italic bold

+++ **//__Example header 3 italic bold underline __//** gives:

Example header 3 italic bold underline

+++ [[span style="font-size: 140%; color: #FF0000;"]]Example header 3 red[[/span]] gives:

(using [[span style="font-family: Arial Black; font-size: 140%;"]] your text [[/span]])

Example header 3

+++ [[span style="font-size: 140%; font-style: italic; color: #77FF00;"]]Example header 3 mini-green, italic[[/span]] gives:

Example header 3 mini-green,italic

+++ [[span style="font-size: 140%; font-style: italic; font-weight: bold; color: #00FF00;"]]Example header 3 green, italic. bold[[/span]] gives:

Example header 3 green, italic. bold

+++ [[span style="font-size: 140%; font-style: oblique; font-weight: bolder; color: #800000;"]]Example header 3 MARON, cursiv(oblique). extra-bold(er!)[[/span]] gives:

Example header 3 MARON, cursiv(oblique). extra-bold(er)

(new: text-decoration: underline or overline, blink, none, line-through) gives:

+++ [[span style="font-size: 140%; font-style: oblique; font-weight: bolder; color: #800000; text-decoration: underline;"]]Example header 3 MARON, cursiv(oblique). extra-bold(er), Underline[[/span]]

Example header 3 MARON, cursiv(oblique). extra-bold(er), Underline

+++ [[span style="font-size: 140%; font-style: oblique; font-weight: bolder; color: #800000; text-decoration: blink;"]]Example header 3 MARON, cursiv(oblique). extra-bold(er), blink[[/span]] ( blink does not work..?)

Example header 3 MARON, cursiv(oblique). extra-bold(er), blink

new: letter-spacing: 7pt:
+++ [[span style="font-size: 140%; font-style: italic; font-weight: bolder; color: #808000; text-decoration: underline; letter-spacing: 7pt;"]]Example header 3 , Olive, cursiv(italic). extra-bold(er), Underline, letter-spacing[[/span]]

Example header 3 Olive, cursiv(italic). extra-bold(er), Underline, letter-spacing

plus line-height: 2.5 :

+++ [[span style="font-size: 140%; font-style: italic; font-weight: bolder; color: #808000; text-decoration: underline; letter-spacing: 7pt; line-height: 2.5;"]]Example header 3 , Olive, cursiv(italic). extra-bold(er), Underline, letter-spacing; line-height: 2.5[[/span]]

Example header 3 Olive, cursiv(italic). extra-bold(er), Underline, letter-spacing,line-height: 2.5

And so on.. :
http://meyerweb.com/eric/css/references/css1ref.html

Helmuti_pdorf does not match any existing user name. Please visit his/her userPage.

More examples:

[[div style="font-size:300%;color:#F00;font-family:Comic Sans, Comic Sans MS,cursive;"]]
Don't Panic!
[[/div]]

gives:-

Don't Panic!

hartnellhartnell. Please visit his/her userPage.

Change Spacing

[[div style="letter-spacing: 7pt ; word-spacing: 10pt ; line-height: 2.5"]]
Don't Panic!
Some example of how to embellish your text in your wiki. These have all been swiped from the forums, to put them all in one place. Please feel free to add more.

* item 27
* item 27  - 36
* item 28
* item 29
 * item 29 -40
 * item  29 - 41
[[/div]]

Normal:

Don't Panic!
Some example of how to embellish your text in your wiki. These have all been
swiped from the forums, to put them all in one place. Please feel free to add more.

  • item 27
  • item 27 - 36
  • item 28
  • item 29
    • item 29 -40
    • item 29 - 41

In action:

Don't Panic!
Some example of how to embellish your text in your wiki. These have all been
swiped from the forums, to put them all in one place. Please feel free to add more.

  • item 27
  • item 27 - 36
  • item 28
  • item 29
    • item 29 -40
    • item 29 - 41

Helmuti_pdorf does not match any existing user name. Please visit his/her userPage.

Force new Paragraph

A space and an underscore at the end of a line _
Forces a linebreak. one can (ab)use this _
 _
 _
 _
to override regular paragraphs.
A space and an underscore at the end of a line
forces a linebreak. one can (ab)use this



to override regular paragraphs.


GoonGoon




Table width

Column width by padding-right

If you want to increase the width of a table-column than you should do exact this!
With using "padding-right" in one cell ( wherever..) :

[[span style="padding-right:45px"]]Your text[[/span]] :

here is an example:

Row 1: Header
Row 2: bla bla n
Row 3, cell 3:
[[span style="color:#F00; background-color: #FFFF00; padding-right:45px"]]Your text [[/span]]

header1 Header2 header3
bla bla 1 bla bla 2 bla bla 3
short short Your text

Column width by Underscore trick

||this sentence is going _
to keep the column width _
to about this size _
because i have used the _
underscore trick||

this sentence is going
to keep the column width
to about this size
because i have used the
underscore trick
||with a long sentence like this, then the column width will adjust to the with according to your browser window size automatically. I'll just type a bit more so that you can see what i mean, by making this a really long sentence.||
with a long sentence like this, then the column width will adjust to the with according to your browser window size automatically. I'll just type a bit more so that you can see what i mean, by making this a really long sentence

Putting the two together gives:-

this sentence is going
to keep the column width
to about this size
because i have used the
underscore trick
with a long sentence like this, then the column width will adjust to the with according to your browser window size automatically. I'll just type a bit more so that you can see what i mean, by making this a really long sentence

Notice that the first column has also done a wraparound, So there are times when the underscore trick will not give you what you need
The wraparound feature does not work with URLs, So, as gerdami says it is best to give that url a name.

So:

||[http://www.wikidot.com Wikidot]||
Gives
Wikidot

The technique in detail:
where you want the break to occur

lastword space underscore return


tip comes from Forum post:
http://community.wikidot.com/forum/t-19550/table-width#post-48753

copied for

Phil ChettPhil Chett. Please visit his/her userPage.


Faked Numbered Lists

A) Numbered (nested) list

  1. Paragraph 1
    1. paragraph 1.1
    2. paragraph 1.2
      1. paragraph 1.2.1
  2. Paragraph 2
    1. Paragraph 2.1
  3. Paragraph 3

B) Faked numbered (span) list

1. Paragraph 1
1.1. Paragraph 1.1
1.2. Paragraph 1.3
1.2.1. Paragraph 1.2.1
2. Paragraph 2
2.1. Paragraph 2.1
3. Paragraph 3

Done with:

[[span style="margin-left:20px"]] 1. Paragraph 1 [[/span]]
[[span style="margin-left:40px"]] 1.1. Paragraph 1.1 [[/span]]
[[span style="margin-left:40px"]] 1.2. Paragraph 1.3 [[/span]]
[[span style="margin-left:60px"]] 1.2.1. Paragraph 1.2.1 [[/span]]
[[span style="margin-left:20px"]] 2. Paragraph 2 [[/span]]
[[span style="margin-left:40px"]] 2.1. Paragraph 2.1 [[/span]]
[[span style="margin-left:20px"]] 3. Paragraph 3 [[/span]]

B.1.) With Bold and Italic letters:

1. Paragraph 1
1.1. Paragraph 1.1
1.2. Paragraph 1.3
1.2.1. Paragraph 1.2.1
2. Paragraph 2
2.1. Paragraph 2.1
3. Paragraph 3

Done with:

[[span style="margin-left:20px"]] **1. Paragraph 1** [[/span]]
[[span style="margin-left:40px"]] //1.1. Paragraph 1.1// [[/span]]
[[span style="margin-left:40px"]] //1.2. Paragraph 1.3// [[/span]]
[[span style="margin-left:60px"]] 1.2.1. Paragraph 1.2.1 [[/span]]
[[span style="margin-left:20px"]] **2. Paragraph 2** [[/span]]
[[span style="margin-left:40px"]] //2.1. Paragraph 2.1// [[/span]]
[[span style="margin-left:20px"]] **3. Paragraph 3** [[/span]]

C) Faked numbered (») list

1. Paragraph 1

1.1. Paragraph 1.1
1.2. paragraph 1.2

1.2.1.. paragraph 1.2.1

2. Paragraph 2

1.1. Paragraph 2.1

3. Paragraph 3

Done with:

1. Paragraph 1
> 1.1. Paragraph 1.1
> 1.2. paragraph 1.2
>> 1.2.1.. paragraph 1.2.1
2. Paragraph 2
> 1.1. Paragraph 2.1
3. Paragraph 3


Further Reading:
Two Column Layout
Left, right, centered and justified
Howto:autonumber headings and ordered lists

Indentation

The Bibliography trick

: I have this line and it only has some text : but I want this to indent.

I have this line and it only has some text
but I want this to indent.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed at velit.
Quisque sem eros, condimentum sed, gravida et, tincidunt vel, arcu. Nam id massa vitae arcu imperdiet eleifend. Fusce nisl urna, lobortis quis, viverra quis, cursus vitae, justo. In auctor libero sit amet nisi. Phasellus nec augue ac ipsum congue blandit. Quisque euismod leo sed ante. Praesent vehicula, metus vel laoreet aliquet, ante massa adipiscing tellus, fermentum lacinia ipsum metus et leo. Cras tempus, enim nec vehicula rhoncus, nunc odio fermentum purus, sed congue purus augue non dolor. Praesent id ante non purus sollicitudin luctus. Aenean non neque.
Maecenas dui. Proin quis sem a magna sollicitudin interdum. Vivamus imperdiet imperdiet tortor.
Praesent eros odio, adipiscing sit amet, interdum ut, dapibus ac, nibh. Nam sit amet pede et orci rutrum iaculis. Praesent ultrices pede et sem. Suspendisse semper, pede vel accumsan rhoncus, ligula velit auctor lacus, non dictum magna nulla ullamcorper neque. In odio. Ut pretium ligula ut turpis. Donec at arcu accumsan orci condimentum vehicula. Nulla facilisi. Duis aliquet fermentum ipsum.

Not at all being a comprehensive list of unique Wikidot div/span classes, but just the ones that I've collected, because I thought they were funny.

DIV/SPAN classes used in Wikidot

(copied from the forum - thanks to ErichSteinboeckErichSteinboeck )

What you type … What you get …

Please [[span class="spantip"]]hover over this[[/span]] text

Please hover over this text

When he said ``[[span class="wiki-email"]].#Madam, I'm Adam[[/span]]'' she knew who he was

When he said “.#Madam, I'm Adam” she knew who he was

Most [[span class="code"]]programming languages[[/span]] are more programming than languages

Most programming languages are more programming than languages

[[div class="code"]]
**** COMMODORE 64 BASIC V2 ****
64K RAM SYSTEM 38911 BASIC BYTES FREE
READY.
[[/div]]

**** COMMODORE 64 BASIC V2 ****
64K RAM SYSTEM 38911 BASIC BYTES FREE
READY.

Do not [[span class="wait-progress"]]wait for this[[/span]] to finish

Do not wait for this to finish

Is it still [[span class="wait-block"]]loading this page[[/span]]?

Is it still loading this page?

Please Mister Postman
[[span class="preview-message"]]
Look and see
If there's a letter
[[/span]]
A letter for me

Please Mister Postman

Look and see
If there's a letter

A letter for me

Can you see the [[span class="gallery-item"]]this gallery's[[/span]] item?

Can you see the this gallery's item?

And the dish [[span class="edit-section-button"]]ran away [[/span]] with the spoon

And the dish ran away with the spoon

This was posted [[span class="odate"]]1242070020|%O|agohover"[[/span]] ago, you know

This was posted 1242070020|%O|agohover" ago, you know

gerdamigerdami. Please visit his/her userPage.

Rainbow Text in Wikidot

(copied from the Playground-Community:Colored-Rainbow-Text - thanks to Helmut_pdorfHelmut_pdorf )

1. Span

[[module CSS show="true"]]
<style>
.rainbow-text span{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 23px;
    text-shadow: 1px 1px 0px #A3A3A3;
    display: inline-block;
}
</style>
[[/module]]
[[div class="rainbow-text"]]
[[span style="color:#9400D3"]]D[[/span]][[span style="color:#4B0082"]]o[[/span]] [[span style="color:#0000FF"]]y[[/span]][[span style="color:#00FF00"]]o[[/span]][[span style="color:#FFFF00"]]u[[/span]] [[span style="color:#FF7F00"]]m[[/span]][[span style="color:#FF0000"]]e[[/span]][[span style="color:#FF7F00"]]a[[/span]][[span style="color:#FFFF00"]]n[[/span]] [[span style="color:#00FF00"]]w[[/span]][[span style="color:#0000FF"]]i[[/span]][[span style="color:#4B0082"]]t[[/span]][[span style="color:#9400D3"]]h[[/span]] [[span style="color:#4B0082"]]R[[/span]][[span style="color:#0000FF"]]a[[/span]][[span style="color:#00FF00"]]i[[/span]][[span style="color:#FFFF00"]]n[[/span]][[span style="color:#FF7F00"]]b[[/span]][[span style="color:#FF0000"]]o[[/span]][[span style="color:#FF7F00"]]w[[/span]] [[span style="color:#FFFF00"]]t[[/span]][[span style="color:#00FF00"]]e[[/span]][[span style="color:#0000FF"]]x[[/span]][[span style="color:#4B0082"]]t[[/span]] [[span style="color:#]]t[[/span]][[span style="color:#4B0082"]]h[[/span]][[span style="color:#0000FF"]]i[[/span]][[span style="color:#00FF00"]]s[[/span]] [[span style="color:#FFFF00"]]?[[/span]]

[[/div]]

Gives:

Do you mean with Rainbow text this ?

2. Using html

This is easier with the Rainbow-Text-Generator:
https://www.html-code-generator.com/html/rainbow-text-generator.php

  • put in the text you want to create in html coding into the 1. window "Enter Your Text here"
  • Example: "Is Rainbow text a colored text with all colors varying?"
  • setup the fontsize and color codes,
  • click on generate
  • copy the result boxes into an [[html]]...[[/html]] block and see:

Done with

[[html]]
<style>
.rainbow-text span{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 24px;
    text-shadow: 1px 1px 0px #A3A3A3;
    display: inline-block;
}
</style>
<div class="rainbow-text">
<span style="color:#ff1b00">I</span><span style="color:#ff3700">s</span> <span style="color:#ff6f00">R</span><span style="color:#ff8b00">a</span><span style="color:#ffa600">i</span><span style="color:#ffc200">n</span><span style="color:#ffde00">b</span><span style="color:#fffa00">o</span><span style="color:#e7ff00">w</span> <span style="color:#b0ff00">t</span><span style="color:#94ff00">e</span><span style="color:#78ff00">x</span><span style="color:#5cff00">t</span> <span style="color:#25ff00">a</span> <span style="color:#00ff12">c</span><span style="color:#00ff2e">o</span><span style="color:#00ff4a">l</span><span style="color:#00ff65">o</span><span style="color:#00ff81">r</span><span style="color:#00ff9d">e</span><span style="color:#00ffb9">d</span> <span style="color:#00fff1">t</span><span style="color:#00f1ff">e</span><span style="color:#00d5ff">x</span><span style="color:#00b9ff">t</span> <span style="color:#0081ff">w</span><span style="color:#0066ff">i</span><span style="color:#004aff">t</span><span style="color:#002eff">h</span> <span style="color:#0900ff">a</span><span style="color:#2500ff">l</span><span style="color:#4000ff">l</span> <span style="color:#7800ff">c</span><span style="color:#9400ff">o</span><span style="color:#b000ff">l</span><span style="color:#cb00ff">o</span><span style="color:#e700ff">r</span><span style="color:#ff00fa">s</span> <span style="color:#ff00c2">v</span><span style="color:#ff00a6">a</span><span style="color:#ff008b">r</span><span style="color:#ff006f">y</span><span style="color:#ff0053">i</span><span style="color:#ff0037">n</span><span style="color:#ff001b">g</span><span style="color:#ff0000">?</span>
</div>
[[/html]]

Helmut_pdorfHelmut_pdorf. Please visit his/her userPage.

Add a New Comment

Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.