 |
Options on Text Formatting
|
|
Breaking Words
When the browser is asked to display text of a paragraph, it
checks the width available to the element. Whenever a line of text gets to the
end of a line, the browser interrupts the line of text and continues the
paragraph to the next line. The length of the last word on the line influences
where the line is interrupted.
One approach used in word processing is to indicate to the
application whether it should "break" the last word on the line or leave it "as
is". In reality, this operation depends on the human language being used. Still,
to let you suggest this operation to the browser, CSS provides a style named
word-break. Its values can be:
- normal: The word cannot be broken. The line break will be done
after the last word on the line
- break-all: Whether the paragraph is justified or not, every word at
the end of the line would be split up to the last letter that can fit at the
end of the line. Here are two examples:
<html>
<head>
<title>Social Science Studies</title>
<style>
.main-title {
text-align: center;
font-weight: bold;
color: Red;
font-size: 0.86cm;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
.sub-title {
text-align: left;
color: Blue;
font-size: 0.64cm;
font-family: Georgia, Times New Roman, serif;
}
.introduction {
word-break: break-all;
text-align: justify;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
.contribution {
word-break: break-all;
text-align: left;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
.paragraph {
text-align: justify;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
</style>
</head>
<body>
<p class="main-title">Social Science Studies</p>
<p class="sub-title">Introduction</p>
<p class="introduction">Social sciences cover a wide range of studies that
address all types of topics about human beings, their behaviors, their
history, their societies, and their environments. Regular social science
areas include sociology, psychology, philosoply, linguistics, communication,
history, geography, demography, ethnicity, anthropology, archaeology,
political science, law, education, criminology, and economy, just to name
a few. Some social science topics are grouped in categories, such as
individual or crowd, where studies tend to address the same categorical
isssues. Still, social sciences are highly interchangeable. Sometimes,
differences are a matter of interpretations based on the particular
area(s) being considered.</p>
<p class="sub-title">Social Science Contributions</p>
<p class="contribution">Social sciences are not strictly confined to the
above list. Studies in chemistry borrow concepts from sociology, anthropology,
and economy. Mathematics and medicine, that are sometimes said not to be a
science, regularly share theories with philosophy, psychology, or criminology.
In the same way, it is practically impossible to study computer science,
which includes computer languages and application programming, without
referring to linguistics. As a conclusion, social sciences are not restricted
to one area of study but contribute to various types of sciences, studies,
and disciplines.</p>
<p class="sub-title">Recommendations</p>
<p class="paragraph">If you are planning to study any of the scocial science
topics, find a good school.</p>
<p>Schools | Majors | Minors</p>
<p>Copyright © 2015</p>
</body>
</html>
This would produce:

- keep-all: If the paragraph is not justified, nothing would happen.
Assuming that the paragraph is justified, no word will be split. The browser
would check what words, and how many words, can fit on the line. Every line
must be filled up to the last word that can fit. Here is an example:
<html>
<head>
<title>Social Science Studies</title>
<style>
.main-title {
text-align: center;
font-weight: bold;
color: Red;
font-size: 0.86cm;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
.sub-title {
text-align: left;
color: Blue;
font-size: 0.64cm;
font-family: Georgia, Times New Roman, serif;
}
.introduction {
word-break: keep-all;
text-align: justify;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
.contribution {
word-break: keep-all;
text-align: left;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
.paragraph {
word-break: keep-all;
text-align: justify;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
</style>
</head>
<body>
<p class="main-title">Social Science Studies</p>
<p class="sub-title">Introduction</p>
<p class="introduction">Social sciences cover a wide range of studies that
address all types of topics about human beings, their behaviors, their history,
their societies, and their environments. Regular social science areas
include sociology, psychology, philosoply, linguistics, communication, history,
geography, demography, ethnicity, anthropology, archaeology, political science,
law, education, criminology, and economy, just to name a few. Some social
science topics are grouped in categories, such as individual or crowd, where
studies tend to address the same categorical isssues. Still, social sciences
are highly interchangeable. Sometimes, differences are a matter of
interpretations based on the particular area(s) being considered.</p>
<p class="sub-title">Social Science Contributions</p>
<p class="contribution">Social sciences are not strictly confined to the above
list. Studies in chemistry borrow concepts from sociology, anthropology, and
economy. Mathematics and medicine, that are sometimes said not to be a science,
regularly share theories with philosophy, psychology, or criminology. In the
same way, it is practically impossible to study computer science, which
includes computer languages and application programming, without referring to
linguistics. As a conclusion, social sciences are not restricted to one area
of study but contribute to various types of sciences, studies, and
disciplines.</p>
<p class="sub-title">Recommendations</p>
<p class="paragraph">If you are planning to study any of the scocial science
topics, find a good school.</p>
<p>Schools | Majors | Minors</p>
<p>Copyright © 2015</p>
</body>
</html>
This would produce:

Text Shadow
A shadow can be added to text to decorate it either to
accentuate its effect or to decoarate it. To let you show a shadow on text. CSS
provides the text-shadow style. This value can be set to none, in
which case the shadow must not be displayed. Otherwise, if you want a shadow,
provide a list of 2 to 4 HTML-based numbers and an optional color as the value
of the style:
- The first value is the distance by which to draw the shadow horizontally:
- If you want the shadow to appear on the left side, set a negative
value.
- If you want the shadow to appear on the right side, set a positive
value.
Here is an example:
<html>
<head>
<title>Risk Management</title>
<style>
#risk {
color: red;
font-size: 0.82cm;
font-family: Rockwell, Bodoni MT Black, Elephant, sans-serif; }
#shadowed {
color: red;
font-size: 0.82cm;
text-shadow: 0.15cm 0 0;
font-family: Rockwell, Bodoni MT Black, Elephant, sans-serif; }
#presentation {
font-size: 0.42cm;
font-family: Times New Roman, Garamond, serif; }
</style>
</head>
<body>
<p id="risk">Risk Management</p>
<p id="shadowed">Risk Management</p>
<p id="presentation">After designing a project or defining a problem that
needs a solution, risk management is the ability to identify problems, to
assess their hazards, and to create a plan to address those problems in
order to reduce the likelihood of bad occurrences.</p>
</body>
</html>
This would produce:

- The second value is the distance by which to draw the shadow vertically:
- If you want the shadow to appear on the top side, set a negative
value.
- If you want the shadow to appear on the bottom side, set a positive
value.
Here is an example:
<html>
<head>
<title>Risk Management</title>
<style>
#risk {
color: red;
font-family: Rockwell, Bodoni MT Black, Elephant, sans-serif;
font-size: 0.82cm; }
#shadowed {
color: red;
font-family: Rockwell, Bodoni MT Black, Elephant, sans-serif;
font-size: 0.82cm;
text-shadow: 0 0.15cm 0; }
#presentation {
font-family: Times New Roman, Garamond, serif;
font-size: 0.42cm; }
</style>
</head>
<body>
<p id="risk">Risk Management</p>
<p id="shadowed">Risk Management</p>
<p id="presentation">After designing a project or defining a problem that needs a
solution, risk management is the ability to identify problems, to assess their
hazards, and to create a plan to address those problems in order to reduce the
likelihood of bad occurrences.</p>
</body>
</html>
This would produce:

If you want the shadow to appear on a corner, set both the first and the
second values non-zero
- The combination of the first and the second values set the angle by which
to draw the shadow. The third value is a type of brush, also referred to as a
blur, that will "currupt" the drawing of the shadow so it would appear
blurred. The lower the value, the more solid the shadow. The higher the value,
the more blurry the shadow would appear. Here is an example:
<html>
<head>
<title>Risk Management</title>
<style>
#risk {
color: red;
font-family: Rockwell, Bodoni MT Black, Elephant, sans-serif;
font-size: 0.82cm; }
#shadowed {
color: red;
font-family: Rockwell, Bodoni MT Black, Elephant, sans-serif;
font-size: 0.82cm;
text-shadow: 0.15cm 0.15cm 0.15cm; }
#presentation {
font-family: Times New Roman, Garamond, serif;
font-size: 0.42cm; }
</style>
</head>
<body>
<p id="risk">Risk Management</p>
<p id="shadowed">Risk Management</p>
<p id="presentation">After designing a project or defining a problem that needs a
solution, risk management is the ability to identify problems, to assess their
hazards, and to create a plan to address those problems in order to reduce the
likelihood of bad occurrences.</p>
</body>
</html>
This would produce:

- The fourth value is optional. It represents the color by which the shadow
should be drawn. If you don't specify it, the browser will use the color of
the element to draw the shadow. If you want the shadow to appear in a color
different from the text of the element, pass the 4th value as a
color. Here is an example:
<html>
<head>
<title>Risk Management</title>
<style>
#risk {
color: red;
font-family: Rockwell, Bodoni MT Black, Elephant, sans-serif;
font-size: 0.82cm; }
#shadowed {
color: red;
font-family: Rockwell, Bodoni MT Black, Elephant, sans-serif;
font-size: 0.82cm;
text-shadow: 0.15cm 0.15cm 0.15cm Blue; }
#presentation {
font-family: Times New Roman, Garamond, serif;
font-size: 0.42cm; }
</style>
</head>
<body>
<p id="risk">Risk Management</p>
<p id="shadowed">Risk Management</p>
<p id="presentation">After designing a project or defining a problem that
needs a solution, risk management is the ability to identify problems, to
assess their hazards, and to create a plan to address those problems in
order to reduce the likelihood of bad occurrences.</p>
</body>
</html>
This would produce:

Letter Spacing
Both the operating system and the browser(s) in the
visitor's computer are equipped to display text with some default
characteristics. One way you can change this is to indicate that you want the
letters to be separated by a certain distance. To let you do this, CSS provides
a style named letter-spacing. Its value can be set to
normal, in which case no change would be made. Otherwise, to separate the
letters in an element, specify an HTML-based number as the value of this
attribute. Here is an example:
<html>
<head>
<title>Risk Management</title>
<style>
#rm {
color: Navy;
font-family: Rockwell, Bodoni MT Black, Elephant, sans-serif;
font-size: 0.86cm;
text-shadow: 0.10cm 0.10cm 0.12cm Blue; }
#presentation {
font-family: Times New Roman, Garamond, serif;
font-size: 0.42cm;
letter-spacing: 0.18cm; }
</style>
</head>
<body>
<p id="rm">Risk Management</p>
<p id="presentation">After designing a project or defining a problem that needs
a solution, risk management is the ability to identify problems, to assess their
hazards, and to create a plan to address those problems in order to reduce the
likelihood of bad occurrences.</p>
</body>
</html>
This would produce:

Word Spacing
Word spacing consists of putting a certain distance among
the words of an element. To allow you to apply that feature, CSS provides a
style named word-spacing. It can have a value as normal for which
nothing would be changed on the text. If you want to apply a certain distance
among the words of text in an element, set an HTML-based numeric value for this
style. Here is an example:
<html>
<head>
<title>Risk Management</title>
<style>
#rm {
color: Blue;
font-family: Rockwell, Bodoni MT Black, Elephant, sans-serif;
font-size: 0.86cm;
text-shadow: 0.10cm 0.10cm 0.12cm Navy; }
#presentation {
font-family: Times New Roman, Garamond, serif;
font-size: 0.42cm;
word-spacing: 0.25cm; }
</style>
</head>
<body>
<p id="rm">Risk Management</p>
<p id="presentation">After designing a project or defining a problem that needs
a solution, risk management is the ability to identify problems, to assess their
hazards, and to create a plan to address those problems in order to reduce the
likelihood of bad occurrences.</p>
</body>
</html>
This would produce:

Preformatting Text
You are probably already familiar with the HTML's pre
element that is used to used to create pre-formatted text. It is
straight-forward and renders text as it is typed in the HTML document. To give
you more options in pre-formatting text, CSS provides a style named
white-space that can take values:
- normal: This is the default value. It means that no change should
be made on the text of the element. Here are examples:
<html>
<head>
<title>C# Programming</title>
<style>
.emphasis {
font-style: italic;
font-size: 13pt;
color: Purple;
}
.main {
font-weight: bold;
color: Red;
font-size: 0.86cm;
}
.paragraph-title {
text-transform: normal;
color: Blue;
font-size: 0.62cm;
text-decoration: underline;
}
.main, .emphasis, .paragraph-title {
font-family: Times New Roman, Garamond, Georgia, serif; }
.regular-paragraph {
white-space: normal;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
</style>
</head>
<body>
<p class="main">C# Programming</p>
<p class="paragraph-title">Introduction to OOP</p>
<p class="regular-paragraph"><abbr title="Pronounced C sharp">C#</abbr> is a computer programming language created and developed <a href="https://msdn.microsoft.com/en-us/library/dd233154.aspx" target="_new"</a>Microsoft</a>. The language adheres to the rules of <abbr title="Object-Oriented Programming">OOP</abbr> and <quote class="emphasis">procedural</quote> programming. C# supports various means of creating objects. These include classes and structures.</p>
<p class="paragraph-title">Creating a Class</p>
<p class="regular-paragraph">A class is created using the <b>class</b> keyword followed by a name and curly brackets in which each member is created. At a minimum, a member is created with a data type, a name, and a semicolon.</p>
<p class="regular-paragraph">The data type of a member of a class can be a primitive type. The member can also be an enumeration, a structure or a class.</p>
<p class="regular-paragraph">It should be noted that an enumeration is usually created in one line. Here is an example:</p>
<p class="regular-paragraph">C# supports various types of applications, such as <abbr title="Graphical User Interface">GUI</abbr> apps.</p>
</body>
</html>
This would produce:

- pre: The text is formatted exactly as done with the pre
element in HTML. Here is an example:
<html>
<head>
<title>C# Programming</title>
<style>
.main {
font-weight: bold;
color: Red;
font-size: 0.86cm;
}
.paragraph-title {
text-transform: normal;
color: Blue;
font-size: 0.62cm;
text-decoration: underline;
}
.main, .paragraph-title { font-family: Times New Roman, Garamond, Georgia, serif; }
.regular-paragraph {
white-space: normal;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
.preformatted
{
white-space: pre;
font-size: 12pt;
color: Blue;
font-family: Courier New, Georgia, serif;
}
</style>
</head>
<body>
<p class="main">C# Programming</p>
<p class="paragraph-title">Introduction to OOP</p>
<p class="regular-paragraph"><abbr title="Pronounced C sharp">C#</abbr> is a computer programming language created and developed by <a href="https://msdn.microsoft.com/en-us/library/dd233154.aspx" target="_new"</a>Microsoft</a>. A class is created using the <b>class</b> keyword followed by a name and curly brackets in which each member is created. A class member can be created using a primitive type data type, a name, and a semicolon. Here is an example of a class:</p>
<p class="preformatted">class Employee
{
string EmployeeNumber;
string FirstName;
char MI;
string LastName;
int YearlySalary;
}<p>
</body>
</html>
This would produce:

As you can see, this style follows those of the pre element:
- The spaces among the words are kept based on the number of times you
pressed the Space bar between two words when you typed that text
- The lines are broken the same way as in the document
- If a line of text is longer than the width available to the element,
the text will go overboard (this is referred to as overflow). If the text
is created directly in the body element, the browser may display a
horizontal scroll bar
- pre-line: The spaces among the words are not kept as in the
document. Instead, only one space (equivalent to pressing the Space bar on the
keyboard) is used to separate two words, even if you had pressed the Space bar
more than once to separate the words. On the other hand, the lines are broken
exactly as done in the document. Here is an example:
<html>
<head>
<title>C# Programming</title>
<style>
.main {
font-weight: bold;
color: Red;
font-size: 0.86cm;
}
.paragraph-title {
text-transform: normal;
color: Blue;
font-size: 0.62cm;
text-decoration: underline;
}
.main, .paragraph-title
{
font-family: Times New Roman, Garamond, Georgia, serif;
}
.regular-paragraph {
white-space: normal;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
.preformatted { white-space: pre; }
.line-breaks-respected { white-space: pre-line; }
.preformatted, .line-breaks-respected,
.line-breaks-not-respected, .preformat-without-overflow
{
font-size: 12pt;
color: Blue;
font-family: Courier New, Georgia, serif;
}
</style>
</head>
<body>
<p class="main">C# Programming</p>
<p class="paragraph-title">Introduction to OOP</p>
<p class="regular-paragraph"><abbr title="Pronounced C sharp">C#</abbr> is a computer programming language created and developed by <a href="https://msdn.microsoft.com/en-us/library/dd233154.aspx" target="_new"</a>Microsoft</a>. A class is created using the <b>class</b> keyword followed by a name and curly brackets in which each member is created. A class member can be created using a primitive type data type, a name, and a semicolon. Here is an example of a class:</p>
<p class="preformatted">class Employee
{
string EmployeeNumber;
string FirstName;
char MI;
string LastName;
int YearlySalary;
}<p>
<p class="regular-paragraph">The member of a class can also be an enumeration. Here is an example:</p>
<p class="line-breaks-respected">enum OccupancyStatus
{
Other = 0,
Available = 1,
Occupied = 2,
NeedsRepair = 3,
}
class Apartment
{
string UnitNumber;
int Bedrooms;
float Bathrooms;
int SecurityDeposit;
int MonthlyRate;
OccupancyStatus Status;
}</p>
</body>
</html>
This would produce:

- nowrap: Neither the extra spaces among the words nor the line
breaks are kept. This means that there is only one space used to separate two
words and the whole text is kept in one line, whether you pressed Enter when
typing text or not. Here is an example:
<html>
<head>
<title>C# Programming</title>
<style>
.main {
font-weight: bold;
color: Red;
font-size: 0.86cm;
}
.paragraph-title {
text-transform: normal;
color: Blue;
font-size: 0.62cm;
text-decoration: underline;
}
.main, .paragraph-title { font-family: Times New Roman, Garamond, Georgia, serif; }
.regular-paragraph {
white-space: normal;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
.preformatted { white-space: pre; }
.break-lines-not-respected { white-space: nowrap; }
.preformatted, .break-lines-not-respected
{
font-size: 12pt;
color: Blue;
font-family: Courier New, Georgia, serif;
}
</style>
</head>
<body>
<p class="main">C# Programming</p>
<p class="paragraph-title">Enumerations</p>
<p class="regular-paragraph">An enumeration consists of creating a list of items that each would represent a constant number. Here is an example of an enumeration:</p>
<p class="preformatted">enum OccupancyStatus
{
Other = 0,
Available = 1,
Occupied = 2,
NeedsRepair = 3,
}</p>
<p class="regular-paragraph">The members of an enumeration can all be created in one line. Here is an example:</p>
<p class="break-lines-not-respected">enum OccupancyStatus
{
Other = 0,
Available = 1,
Occupied = 2,
NeedsRepair = 3,
}</p>
</body>
</html>
This would produce:

- pre-wrap: This is close to the pre value. The spaces among
the words are respected. The line breaks are respected except that, if a word
is positioned at the end of a line but the available width would hide that
word or the rest of the line as done with the pre value of the HTML
pre element, then the browser continues the text on the next line, without
concatenating that line of text to the next line of text. Here is an example:
<html>
<head>
<title>C# Programming</title>
<style>
.emphasis {
font-style: italic;
font-size: 13pt;
color: Purple;
}
.main {
font-weight: bold;
color: Red;
font-size: 0.86cm;
}
.paragraph-title {
text-transform: normal;
color: Blue;
font-size: 0.62cm;
text-decoration: underline;
}
.main, .emphasis, .common, .paragraph-title
{
font-family: Times New Roman, Garamond, Georgia, serif;
}
.regular-paragraph {
white-space: normal;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif;
}
.preformatted { white-space: pre; }
.break-lines-respected { white-space: pre-line; }
.break-lines-not-respected { white-space: nowrap; }
.preformat-without-overflow { white-space: pre-wrap; }
.preformatted, .break-lines-respected,
.break-lines-not-respected, .preformat-without-overflow
{
font-size: 12pt;
color: Blue;
font-family: Courier New, Georgia, serif;
}
</style>
</head>
<body>
<p class="main">C# Programming</p>
<p class="paragraph-title">Introduction to OOP</p>
<p class="regular-paragraph"><abbr title="Pronounced C sharp">C#</abbr> is a computer programming language created and developed <a href="https://msdn.microsoft.com/en-us/library/dd233154.aspx" target="_new"</a>Microsoft</a>. The language adheres to the rules of <abbr title="Object-Oriented Programming">OOP</abbr> and <quote class="emphasis">procedural</quote> programming. C# supports various means of creating objects. These include classes and structures.</p>
<p class="paragraph-title">Creating a Class</p>
<p class="regular-paragraph">A class is created using the <b>class</b> keyword followed by a name and curly brackets in which each member is created. At a minimum, a member is created with a data type, a name, and a semicolon. The data type can be a primitive type. Here is an example of a class:</p>
<p class="preformatted">class Employee
{
string EmployeeNumber;
string FirstName;
char MI;
string LastName;
int YearlySalary;
}<p>
<p class="regular-paragraph">The member of a class can also be an enumeration. Here is an example:</p>
<p class="break-lines-respected">enum OccupancyStatus
{
Other = 0,
Available = 1,
Occupied = 2,
NeedsRepair = 3,
}
class Apartment
{
string UnitNumber;
int Bedrooms;
float Bathrooms;
int SecurityDeposit;
int MonthlyRate;
OccupancyStatus Status;
}</p>
<p class="regular-paragraph">It should be noted that an enumeration is usually created in one line. Here is an example:</p>
<p class="break-lines-not-respected">enum OccupancyStatus
{
Other = 0,
Available = 1,
Occupied = 2,
NeedsRepair = 3,
}</p>
<p class="regular-paragraph">C# supports various types of applications, such as <abbr title="Graphical User Interface">GUI</abbr> apps. Here is an example that creates a form that contains a multi-line text box:</p>
<p class="preformatted">using System;
using System.Windows.Forms;
public partial class TextEditor : System.Windows.Forms.Form
{
private TextBox txtEditor;
public TextEditor()
{
InitializeComponent();
}
private void InitializeComponent()
{
// Text Box: Editor
txtEditor = new TextBox();
txtEditor.Location = new System.Drawing.Point(11, 12);
txtEditor.Multiline = true;
txtEditor.Font = new System.Drawing.Font("Times New Roman", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, 0);
txtEditor.ScrollBars = ScrollBars.Vertical;
txtEditor.Size = new System.Drawing.Size(640, 100);
Controls.Add(txtEditor);
// Form: Editor
ClientSize = new System.Drawing.Size(663, 123);
Text = "Text Editor";
Load += new System.EventHandler(EditorLoad);
}
}</p>
<p class="preformat-without-overflow">public partial class TextEditor
{
private void EditorLoad(object sender, EventArgs e)
{
MessageBox.Show("There is no text to display in the text box at this time.", "Text Editor", MessageBoxButtons.OK, MessageBoxIcon.Information);
}
[STAThread]
public static int Main()
{
Application.Run(new TextEditor());
return 0;
}
}</p>
</body>
</html>
This would produce:

|