Table of Contents

- Text Styling

- Font Styles

- Text Styling

- Text Alignment

- Text Shadow

- Drop Caps

- Display Dimension

- Border

- Background

- Border Styling

- Tables

- Images in KF8

- Simple Images

- Floating Image

- Background Images

- Image Styling

- Image Transformation

- Scalable Vector Graphics

- Background Styles

- Background Color

- Background Images

- Background Image Origin

Text Styling

KF8 supports a variety of ways to style the text of a book.

Font Styles

In general, do not specify the font style. Users prefer to select their own default reading settings.

Font tag

Font face can be set. Users will see this font instead of their selected font. In addition to the available fonts, custom fonts can be added and used.

Example:

Georgia, Caecilia, Trebuchet, Verdana, Arial, Times New Roman, Courier, Lucida
Red size 1 text. Blue size 2 text. Green size 4 text. Purple size 6 text.

How To:

To set the font, use the font tag and its face attribute. To set the color and size, use the color and size attributes.
<font face="Georgia" color="green" size=4 >
Font face can also be set by using the font-family CSS styling property.
font-family: arial;
color: red;
font-size: 120%;

CSS font styles

Font styles such as style, weight, and variant can be set by using CSS styling properties.

Example:

Normal text.
Italic lighter text.
Italic bold text.
Oblique bold small-caps text.

How To:

To set these font styles, use the font-style, font-weight, and font-variant properties.
<span style="font-style:italic; font-weight: lighter; font-variant: normal">

Text Styling

The content can be formatted with other text styling, such as word spacing and text align.

Example:

Uppercase text with Word spacing 1em.
Underlined text with letter spacing 0.2em, word spacing 2em.
Capitalized line through text.

How To:

To set this text styling, use the word-spacing, text-transform, letter-spacing, and text-decoration CSS properties.
<span style="letter-spacing: .2em; word-spacing: 2em; text-decoration:underline;">

Text Alignment

Text content can be aligned to a desired position by using CSS styling.

Example:

Center aligned text.
Lorem ipsum sed ut nibh nibh. Vestibulum facilisis nulla id leo ullamcorper molestie. Donec sit amet mauris ut arcu vulputate faucibus. Sed eleifend fringilla mauris, eget fermentum nibh consequat eget.

Left aligned text.
Lorem ipsum etiam euismod tortor ac massa hendrerit et rhoncus magna lobortis. Nulla et faucibus nibh. Aliquam sed arcu eget nisl vulputate fermentum. Cras sed arcu sed turpis placerat vehicula.

Right aligned text.
Lorem ipsum curabitur nulla mauris, porta non elementum at, imperdiet a velit. Suspendisse in orci adipiscing lectus tempor molestie ac a nibh. Ut malesuada sapien luctus risus laoreet non lobortis erat porta. Mauris ante purus, tincidunt a condimentum sit amet, sagittis auctor turpis.

How To:

To set text alignment, use the text-align property. To set text indentation, use the text-indent property.
text-align:right;
text-indent:0em;

Text Shadow

Text can be shadowed to make the content more stylish.

Example:

Shadowed text.

How To:

To set text shadowing, use the text-shadow CSS property.
text-shadow:5px 5px #379027;

Drop Caps

Drop caps can be used to apply a different style to the first letter or word.

Example:

Lorem ipsum sed ut nibh nibh. Vestibulum facilisis nulla id leo ullamcorper molestie. Donec sit amet mauris ut arcu vulputate faucibus. Sed eleifend fringilla mauris, eget fermentum nibh consequat eget. Etiam euismod tortor ac massa hendrerit et rhoncus magna lobortis. Nulla et faucibus nibh. Aliquam sed arcu eget nisl vulputate fermentum. Cras sed arcu sed turpis placerat vehicula.

Lorem ipsum curabitur nulla mauris, porta non elementum at, imperdiet a velit. Suspendisse in orci adipiscing lectus tempor molestie ac a nibh. Ut malesuada sapien luctus risus laoreet non lobortis erat porta. Mauris ante purus, tincidunt a condimentum sit amet, sagittis auctor turpis. Etiam euismod tortor ac massa hendrerit et rhoncus magna lobortis. Nulla et faucibus nibh. Aliquam sed arcu eget nisl vulputate fermentum. Cras sed arcu sed turpis placerat vehicula.

How To:

To set drop caps, use the float, font, and margin properties.
span.dropcaps
{
float: left;
font-size: 4em;
font-weight: bold;
color: #6A287E;
margin-top: -.2em;
margin-bottom: -.2em;
margin-right: .1em;
padding-right: .1em;
}

Display Dimension

The dimension of the content display can be set.

Example:

Lorem ipsum duis ultrices eleifend rhoncus. Quisque vulputate nisl ultricies nisi posuere at lacinia quam suscipit. Curabitur risus nunc, laoreet at interdum eget, rutrum non neque. Donec et turpis libero. Nunc commodo, nisl laoreet fringilla iaculis, magna dui tincidunt orci, a aliquet velit leo vitae orci. Phasellus varius orci fermentum mi aliquam vitae convallis odio aliquet. Nam commodo lobortis sem, vel ultricies erat suscipit eget.

How To:

To set the content display dimensions, use the width and height CSS properties.
width:50%; height:50%;
While setting dimensions, some words could exceed the display width. The words can be wrapped by using the word-wrap property.
word-wrap:break-word;

Border

Border can be used to decorate the content.

Example:

Lorem ipsum sed ut nibh nibh. Vestibulum facilisis nulla id leo ullamcorper molestie. Donec sit amet mauris ut arcu vulputate faucibus. Sed eleifend fringilla mauris, eget fermentum nibh consequat eget. Etiam euismod tortor ac massa hendrerit et rhoncus magna lobortis. Nulla et faucibus nibh. Aliquam sed arcu eget nisl vulputate fermentum. Cras sed arcu sed turpis placerat vehicula.

How To:

To set the border, use the border CSS property. Different border styles, dimensions, and colors can be applied to different sides.
border:0.3em solid red;
To make the content more readable, padding can be applied by using the padding property.

Background

A text background can be set to make the content more appealing.

Example:

Lorem ipsum aliquam interdum, libero id elementum rutrum, metus urna adipiscing elit, quis ultricies urna turpis sit amet lorem. Mauris ante diam, commodo in suscipit eget, fermentum eget quam. Integer blandit dui mauris. Aenean tempor enim ut erat facilisis eget aliquet erat egestas. Aliquam tincidunt facilisis nisl, id venenatis nulla imperdiet dignissim. Curabitur enim urna, lobortis sed eleifend in, sodales ac purus. Pellentesque vel ullamcorper dui. Phasellus auctor eleifend suscipit.

How To:

To set the background of the content, use the background CSS property.
background:red;

For more background styles, see the Background Styles section.

Border Styling

A content border can be applied by using CSS properties. Different types of border styling can differentiate content such as notes, highlights, tips, etc.

Rounded border

A rounded border can visually separate different types of content.

Example:

Lorem ipsum nulla mollis, lacus vitae cursus fermentum, tellus quam ornare nisl, in congue mi dolor sit amet purus. Mauris tempor orci ut neque sollicitudin gravida.

Lorem ipsum proin at fermentum justo. Duis sodales diam eget erat pellentesque auctor. Duis molestie consequat accumsan. Vestibulum consectetur ligula adipiscing nisl rhoncus vel bibendum tellus feugiat. Mauris sit amet metus sem. Sed eros risus, facilisis faucibus commodo sed, cursus sed nisi. Morbi nibh mi, tincidunt semper tempor at, feugiat non erat. Aliquam euismod lorem a diam viverra rhoncus. Curabitur ultricies erat quis leo semper in luctus nunc vehicula. Nam tempor, nibh et consectetur facilisis, nunc felis consectetur erat, eget fermentum urna turpis sed arcu. Ut tincidunt sodales massa sed tempus. Mauris at neque arcu. Curabitur mauris nisi, semper in feugiat ac, aliquet nec leo. Aliquam ultrices consectetur magna vel lobortis. Integer vehicula lectus nec ipsum bibendum rhoncus. Fusce varius malesuada tellus at pulvinar.

How To:

To set the radius for the border, use the border-radius CSS property.
border-radius:1em;

Tables

Tables with rich styles can be added.

Example:

How To:

For mobi format tables may not look great. For mobi format an equivalent images can be used along with media query and display:none CSS property.

Images in KF8

This chapter illustrates some of the possible styles for images.

Simple Images

We normally add images as part of the content. Images can be added to the content at any point.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare sagittis leo vitae lacinia. Nullam id lorem eget nisi hendrerit placerat nec nec ipsum. Proin a quam nunc, ac scelerisque justo. Aliquam erat urna, varius ut blandit a, mattis quis mi. Fusce pretium ligula vel diam vulputate sodales. Duis sit amet erat rhoncus urna tempus egestas. Aliquam sollicitudin dui elit, nec tristique lorem. Etiam consectetur nisi non ligula pulvinar porta. Proin eget lectus enim. In augue turpis, laoreet quis elementum mattis, elementum sed libero. Mauris ullamcorper convallis elementum. Vivamus dignissim dignissim ante, sed cursus ipsum hendrerit a. Cras ac magna sit amet quam venenatis semper. Vestibulum fringilla, orci sit amet congue tincidunt, odio purus suscipit eros, in lacinia ligula augue vestibulum quam. Nullam mollis lectus in urna sagittis ultrices.
Vestibulum facilisis nulla id leo ullamcorper molestie. Donec sit amet mauris ut arcu vulputate faucibus. Sed eleifend fringilla mauris, eget fermentum nibh consequat eget. Etiam euismod tortor ac massa hendrerit et rhoncus magna lobortis. Nulla et faucibus nibh. Aliquam sed arcu eget nisl vulputate fermentum. Cras sed arcu sed turpis placerat vehicula. Curabitur congue dignissim velit eu egestas. Mauris eget turpis nec ipsum pellentesque consequat eu nec orci. Donec eget nibh id ligula bibendum molestie non non turpis. Aenean justo odio, accumsan eu tristique a, consequat et tortor. Suspendisse dignissim elit a est viverra semper ac vitae neque. Vivamus vel augue quis orci viverra pharetra varius a dolor.

How To:

To add an image to the content, use the img tag.

Floating Image

Left floating image

Using CSS, we can make an image float to the left of the text. The text will wrap around the image.

Example:

Lorem ipsum donec tincidunt tellus pellentesque leo semper venenatis. Vivamus fringilla sem lectus. Cras dignissim iaculis leo sit amet ultricies. Donec porta fermentum lorem vel blandit. Praesent tincidunt vulputate orci eu posuere. Pellentesque id laoreet libero. Morbi ullamcorper, lectus nec rutrum aliquet, elit erat rutrum lorem, sit amet pulvinar est dolor volutpat erat. Donec vitae nulla mauris, ut lobortis neque.Nullam luctus feugiat quam, ut mattis arcu laoreet at. Suspendisse purus magna, porttitor varius cursus eget, eleifend non tellus. Etiam facilisis elementum nunc et sollicitudin. Nunc at magna tortor, ac bibendum libero. Nam vulputate orci nec arcu imperdiet molestie eu ac erat. Nam scelerisque consequat venenatis. Aenean varius aliquet sollicitudin. Vivamus justo risus, lobortis ac eleifend at, euismod a dui. Cras id eleifend nisi. Morbi sit amet erat nec nunc vehicula pharetra.

Sed ut nibh nibh. Vestibulum facilisis nulla id leo ullamcorper molestie. Donec sit amet mauris ut arcu vulputate faucibus. Sed eleifend fringilla mauris, eget fermentum nibh consequat eget. Etiam euismod tortor ac massa hendrerit et rhoncus magna lobortis. Nulla et faucibus nibh. Aliquam sed arcu eget nisl vulputate fermentum. Cras sed arcu sed turpis placerat vehicula.

Nullam justo tortor, ultricies et scelerisque pharetra, pharetra id nulla. Quisque vulputate, est vel luctus feugiat, magna lacus cursus elit, ut ultricies lectus justo ut quam. Phasellus suscipit viverra elit, nec bibendum mi tempor sit amet. Integer at diam at ipsum congue vestibulum. Integer nec lacus sem. Integer id convallis ante. In vitae magna lorem. Pellentesque vitae turpis nec tortor malesuada pretium non non lacus. Donec urna urna, consectetur nec cursus in, aliquet ac eros. Nunc dolor nisi, vulputate sed luctus sit amet, ultrices et tellus. Pellentesque urna velit, tincidunt in tristique a, interdum quis nunc.

How To:

To float an image to the left, use the float:left CSS styling property.

Right floating image

Images can be floated to the right of the text.

Example:

Lorem ipsum morbi nisl magna, porttitor vestibulum scelerisque vitae, vestibulum eget dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec id leo nunc, eu pulvinar dui. Etiam nec dolor eu elit molestie scelerisque.

Integer in sapien orci. Nunc lobortis, urna eget congue convallis, quam lacus accumsan libero, eget feugiat elit ipsum ac leo. Suspendisse quis massa nec dolor posuere luctus.Sed ut nibh nibh. Vestibulum facilisis nulla id leo ullamcorper molestie. Donec sit amet mauris ut arcu vulputate faucibus. Sed eleifend fringilla mauris, eget fermentum nibh consequat eget. Etiam euismod tortor ac massa hendrerit et rhoncus magna lobortis. Nulla et faucibus nibh. Aliquam sed arcu eget nisl vulputate fermentum. Cras sed arcu sed turpis placerat vehicula. Curabitur congue dignissim velit eu egestas. Mauris eget turpis nec ipsum pellentesque consequat eu nec orci. Donec eget nibh id ligula bibendum molestie non non turpis. Aenean justo odio, accumsan eu tristique a, consequat et tortor. Suspendisse dignissim elit a est viverra semper ac vitae neque. Vivamus vel augue quis orci viverra pharetra varius a dolor. Donec ipsum turpis, facilisis eget lacinia eu, luctus at dolor. Curabitur nulla mauris, porta non elementum at, imperdiet a velit.

How To:

To float an image to the right, use the float:right CSS styling property.

Image alignment

Images in the text can be aligned left or right as needed. The text will wrap around the image.

Example:

Lorem ipsum curabitur congue dignissim velit eu egestas. Mauris eget turpis nec ipsum pellentesque consequat eu nec orci. Donec eget nibh id ligula bibendum molestie non non turpis. Aenean justo odio, accumsan eu tristique a, consequat et tortor. Suspendisse dignissim elit a est viverra semper ac vitae neque. Vivamus vel augue quis orci viverra pharetra varius a dolor.

Donec ipsum turpis, facilisis eget lacinia eu, luctus at dolor. Curabitur nulla mauris, porta non elementum at, imperdiet a velit. Suspendisse in orci adipiscing lectus tempor molestie ac a nibh. Ut malesuada sapien luctus risus laoreet non lobortis erat porta. Mauris ante purus, tincidunt a condimentum sit amet, sagittis auctor turpis. Ut fringilla velit eget orci porta at ultricies magna faucibus. Donec neque nibh, tincidunt vitae iaculis id, porttitor sit amet lacus.

How To:

To align an image, set the values of the img tag attribute align. Attribute values can be left, right, middle, bottom, or top.
align="left"

Background Images

Images can be used as a background to the content.

For a detailed explanation of background images, please see the Background Images section.

Image Styling

Different styles can be applied to the images with CSS styling properties.

Image border

Images can have different styles of border. Border styling can vary with size, shape, etc.

Border size

Image border size can be set as desired.

Example:

How To:

To add border to an image, use the border attribute. The borders of the images above are set with values of 1, 2, and 3, respectively.
border=2

Border colors

Image borders can be set to different colors using CSS styling properties.

Example:

How To:

To set the color of the border, use the border-color CSS property.
style="border-color:red"

Rounded border

A rounded border for an image can be set by using CSS styling properties. By adjusting CSS property values, different shapes of borders can be achieved. Changing the values of other properties changes styles such as background color and border style.

Example:

How To:

To set these types of styles, use the border, padding, background, and border-radius CSS properties.
img.border1
{
border:.2em solid #a1a1a1;
padding:10px 10px;
background:#dddddd;
border-radius:10px;
}

Image Transformation

An original image can be transformed to a different style by using CSS styling properties. The size of the image can be changed to fit the content.

Image resizing

An image can be displayed in any size by specifying the display size.

Example:

The original image

The same image file is displayed in different sizes to suit the content.

How To:

To resize an image, use the width and height attributes in the img tag.

Image rotation

An original image can be rotated to any angle by using CSS styling properties.

Example:

How To:

In this example, a single image file is displayed in different sizes by using the width and height attributes of the img tag. To rotate and place the image, two div tags are used with CSS styling. One div tag is used to place the image at the correct position by using the translate CSS function. Another div tag is used to rotate the image by using the rotate CSS function.
<div style="-webkit-transform : translate(0px,150px); ">
<div style="width:10px; height:10px; -webkit-transform : rotate(216deg); float:left; ">
<img src="images/tlook.jpg" width=10 height=10 border=1></img>
</div>
</div>

Y axis rotation

Similarly, images also can be rotated along the X or Y axis by using CSS styling properties.

Example:

How To:

To rotate the image, use the div tag with the rotateX or rotateY CSS property.

Other transformations

Other CSS transformations are available, such as skewing and scaling the images.

Scalable Vector Graphics

Scalable Vector Graphics (SVG) images can be added to the content by different methods.

Example:

How To:

This image is an external SVG file. It is added by using the img tag. SVG images can be embedded into the content by using the embed tag.

Background Styles

This chapter describes two types of background styles:

- Background color

- Background image

Background styles helps to make the content more appealing.

Background Color

The content can have any color as a background color. The example below has multiple background colors.

Example:

This block has a dark sea green color background

This block has a yellow chiffon background

This block has a gray background

End of yellow chiffon background

End of dark sea green background

How To:

To set the background of the content, use the background CSS property.
background:red;

Background Images

The content can have images as a background. The size of the background image can be set to a different size than the original image. The background image in the example below is reduced from the original size.

Example:

Lorem ipsum donec elementum suscipit risus, tempus elementum eros rhoncus quis. Morbi gravida nisi id ipsum bibendum nec blandit eros rutrum. Nam condimentum fringilla volutpat. Duis ullamcorper dignissim leo eu lobortis. Nullam et mollis metus. Curabitur eget purus a nisi dapibus venenatis. Maecenas lacinia placerat pretium. Phasellus ultricies pulvinar erat, et blandit mauris tincidunt eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus mattis commodo nunc vitae placerat. Aenean sed velit nec libero viverra fermentum accumsan quis urna. Donec et dolor ut massa volutpat vulputate. Aliquam blandit metus sem, et sodales ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac urna sem, at porttitor ligula. Donec convallis condimentum ante, at ultricies diam tincidunt a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla nec mauris massa, eu volutpat massa. Nulla diam lectus, pharetra id porttitor vel, consequat sed lectus. Vivamus vel dui odio. Fusce diam nisi, tincidunt eget dapibus eu, lacinia ac velit. Proin ac enim at orci bibendum dignissim eu sed dui. Vestibulum viverra risus eu eros dapibus at volutpat justo tincidunt. Phasellus congue libero at leo posuere volutpat. Nulla vehicula rutrum leo vel rutrum. Mauris a metus nisi, vitae cursus lectus. Fusce quis odio felis, id consequat ipsum.

How To:

To set the background image size, use the background-size property.
background:url(images/fl1.png);
background-size: 5em 5em;

Background Image Origin

Background image starting position can be set.

Example:

This block is an example of background image positioning in the div. The background image is placed at the right of the block.

Lorem ipsum donec in lorem vel enim placerat interdum id id enim. In hac habitasse platea dictumst. Suspendisse potenti. Pellentesque mollis, mi quis sodales iaculis, leo diam porttitor ligula, non molestie dolor velit at ligula. Pellentesque turpis purus, vestibulum eget tempus vel, commodo eget sem. Ut sed leo dui, at gravida quam. Vivamus et vestibulum enim. Nulla id arcu libero, in mattis nulla. Ut aliquet dignissim semper.

This block is an example of background image positioning in the div. The background image is placed at the beginning of the text.

Lorem ipsum donec elementum suscipit risus, tempus elementum eros rhoncus quis. Morbi gravida nisi id ipsum bibendum nec blandit eros rutrum. Nam condimentum fringilla volutpat. Duis ullamcorper dignissim leo eu lobortis. Nullam et mollis metus. Curabitur eget purus a nisi dapibus venenatis. Maecenas lacinia placerat pretium. Phasellus ultricies pulvinar erat, et blandit mauris tincidunt eget.

How To:

To place a background image, use the background-position CSS property.
background-position:left;