{"id":374,"date":"2012-09-07T11:18:37","date_gmt":"2012-09-07T11:18:37","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=374"},"modified":"2025-09-16T14:56:36","modified_gmt":"2025-09-16T14:56:36","slug":"06-text-formatting","status":"publish","type":"post","link":"http:\/\/b.parsons.edu\/~dejongo\/06-text-formatting\/","title":{"rendered":"06 Text Formatting"},"content":{"rendered":"<p><br id=\"TofContents\"\/><\/p>\n<ul id=\"contents\">\n<li><strong>Contents<\/strong>\n<\/li>\n<li><a href=\"#paragraph-alignment_first-line\">Paragraph Alignment<\/a>\n<\/li>\n<li><a href=\"#paragraph-alignment_first-line\">First Line Indent<\/a>\n<\/li>\n<li><a href=\"#text-overflow\">Text Overflow<\/a>\n<\/li>\n<li><a href=\"#text-spacing_vertical-alignment_leading\">Spacing<\/a>\n<\/li>\n<li><a href=\"#text-spacing_vertical-alignment_leading\">Vertical Alignment<\/a>\n<\/li>\n<li><a href=\"#text-spacing_vertical-alignment_leading\">Leading<\/a>\n<\/li>\n<li><a href=\"#paragraph-spacing\">Paragraph Spacing<\/a>\n<\/li>\n<li><a href=\"#text-decoration_transform_shadow_stroke\">Text Decoration<\/a>\n<\/li>\n<li><a href=\"#text-decoration_transform_shadow_stroke\"> Transform<\/a>\n<\/li>\n<li><a href=\"#text-decoration_transform_shadow_stroke\">Shadow &#038; Stroke<\/a>\n<\/li>\n<li><a href=\"#initial\">Initial Letter<\/a>\n<\/li>\n<li><a href=\"#wrap\">Text Wrap<\/a>\n<\/li>\n<li><a href=\"#hyphenation\">H&#038;J<\/a>\n<\/li>\n<li><a href=\"#text-rendering\">Kerning &#038; Ligatures<\/a>\n<\/li>\n<li><a href=\"#white-space\">White Space<\/a>\n<\/li>\n<\/ul>\n<div style=\"width: 100%;\">\n<p>Text is how the characters are arranged in the flow. This includes writing direction to accommodate languages other than English, so that the inline progression of the text can orient its flow from left-to-right, right-to-left, or top-to-bottom. There are a lot of controls for writing other languages that are not necessary for writing in English. We are going to stick with English.\n<\/p>\n<p>Many of the properties control flow. Properties such as white space, padding, margin and line hight are not text-properties but inform how the text is to flow. Instead of using multiple<code>&lt;br><\/code> to add space before or after, you add padding or margin.\n<\/p>\n<\/div>\n<p><br id=\"paragraph-alignment_first-line\"\/><\/p>\n<h2 class=\"l-head\">Paragraph Alignment and First Line Indent<\/h2>\n<p class=\"pat\">To control the text&#8217;s <a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-text-20021024\/#text-alignment\">alignment<\/a>, use:  <code>text-align: (start, end, left, right, center, justify)<\/code>. As different text flow directions push what right and left can mean, there has been a move to adopt start and end as the nomenclature instead of left and right.\n<\/p>\n<p>To specify the <a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-text-20021024\/#indentation\">first line indent<\/a>, use: <code>text-indent: <\/code> and supply a length or a percentage. It will be a negative indent if you supply a negative value.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#align h3{\r\ntext-align: center;\r\n\/* left, center, right, justify*\/\r\n}\r\n#align p {\r\ntext-align: left;\r\n\/* left, center, right, justify*\/\r\ntext-indent: 2em;\r\n\/*length or percent*\/\r\n}\r\n#align p:last-child {\r\ntext-align: right;\r\n\/* left, center, right, justify*\/\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div style=\"width: 300px; margin: 20px auto; padding: 10px 20px; border: 3px solid #aaa;background: #eee\" id=\"align\">\n<h3>Paragraph Alignment and First Line Indent<\/h3>\n<p>You can change the alignment of this header, this paragraph and the attribution by changing the alignment property<\/p>\n<p> \u2014 onno\n<\/p>\n<\/div>\n<p> Someday soon there will be more control over justified text, as the CSS3 specifications for that are already in place. You will then be able to specify how text is to be justified: <a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-text-20021024\/#justification-prop\">text-justify<\/a> <code>auto, lose, distributed<\/code> and how the last line will be justified: text-last-line <code>auto, start, end, center, justify<\/code> but the browsers have yet to implement these justification controls. <\/p>\n<p><br id=\"text-overflow\"\/><\/p>\n<h2 class=\"l-head\">The Text Overflow Property<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">When there is too much text for the box, it is possible to specify the <a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-text-20021024\/#text-overflow-props\"> text overflow mode<\/a> <strong>\u2014 if, and only if the box also has the overflow property \u2014<\/strong> text-overflow:<code>clip, ellipsis, ellipsis-word<\/code>. Try removing the overflow property and the text-overflow property breaks down.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#overflow p {\r\nwhite-space:nowrap; \r\nwidth: 15em; \r\noverflow: hidden; \r\n\/*visible, hidden, scroll, auto*\/\r\nborder:1px solid #aaa;\r\n}\r\n#overflow p:hover{\r\ntext-overflow: inherit;\r\noverflow: visible;\r\n}\r\n#overflow p:first-child {\r\ntext-overflow: ellipsis;\r\n\/*clip, ellipsis, ellipsis-word*\/\r\n}\r\n#overflow p:last-child {\r\ntext-overflow: clip;\r\n\/*clip, ellipsis, ellipsis-word*\/\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div style=\"width: 300px; margin: 20px auto; padding: 30px 20px 10px; border: 3px solid #aaa;background: #eee\" id=\"overflow\">\n<p>Hover over this line of text and the remaining text will appear <span style=\"color: blue\">blue<\/span>.<\/p>\n<div><\/div>\n<p>Hover over this line of text and the remaining text will appear <span style=\"color: red\">red<\/span><\/p>\n<\/div>\n<p><br id=\"text-spacing_vertical-alignment_leading\"\/><\/p>\n<h2 class=\"l-head\">Text Spacing, Vertical Alignment and Leading<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">The ability to control the spacing between <a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-text-20021024\/#letter-spacing-prop\">Letters<\/a>, otherwise known as tracking, and <a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-text-20021024\/#word-spacing-prop\">words<\/a> is easily accomplished but know that the controls are a bit course for small text sizes. The increments are based on the character&#8217;s rendering, and that depends on the screen in use. Some of the high resolution displays will provide better controls than what are currently considered normal resolution displays.\n<\/p>\n<p>The vertical alignment of characters, or superscript and subscript, is done with the <code>vertical-align<\/code> property, using the following values: <code>baseline, sub, super, top, text-top, middle, bottom, text-bottom, percentage<\/code> and <code>length<\/code>. Super and text-top are set to around 75% of the line-height. You can specify a percentage beyond that but doing so will increase the leading for that line. Put in a value of 200% and you will see what I mean.\n<\/p>\n<p>Leading is specified by either relative or an absolute measurement with the <code>line-height<\/code> property. Relative measurements are based on the em that has been specified for the type, while a height in pixels is absolute, and do not change with changes in the size of the text.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#text_layout h3{\r\n\tletter-spacing: 1em;\r\n\tword-spacing: 1em;\r\n}\r\n#text_layout p {\r\n\tletter-spacing: .1em;\r\n\tword-spacing: .2em;\r\n\tline-height: 1.1;\r\n\ttext-indent: 2em;\r\n\ttext-align: justify; \r\n\/* left, center, right, justify*\/\r\n}\r\n#text_layout span {\r\n\tfont-size: 50%;\r\n\tvertical-align: super;\r\n\/*baseline, middle, sub, super, text-top, \r\n\ttext-bottom, top, bottom or percentage (200%)*\/\r\n}\r\n#text_layout p:last-child {\r\n\tletter-spacing: .1em;\r\n\tword-spacing: .2em;\r\n\tline-height: 1.8;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div style=\"width: 300px; margin: 20px auto; padding: 20px; border: 3px solid #aaa; background: #eee\" id=\"text_layout\">\n<h3>Text Layout Properties<\/h3>\n<p>Change the text by applying different styles. Notice that when you make a mistake, the style reverts to the default style. The 1<span>st<\/span> element is h3. The 2<span>nd<\/span> and 3<span>rd<\/span> elements are p. The 2<span>nd<\/span> p element can be selected separately and given styling in addition to the style determined by the more general p selector.<\/p>\n<p>Being able to select different elements is the key to using CSS. The roll of the selector is, for that reason, extremely important but it usually takes a little while before students learning about CSS get a handle on just how they work. While it is easy enough to see in simple examples, the selectors, the cascade that determines them, and the inheritance of the different properties keeps web designers on their toes. Leave out one character and the whole thing can come crashing down.\n<\/p>\n<\/div>\n<p><br id=\"paragraph-spacing\"\/><\/p>\n<h2 class=\"l-head\">Paragraph Spacing<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">Paragraph spacing is accomplished through padding and margins.  Space before and space after is <code>padding: 10px 0<\/code>. The left margin is also controlled by padding or margins, and the right margin can be controlled by the paragraph width in addition to padding and margins. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#p-spacing p {\r\nfont-size: 1em;\r\nline-height: 1.2 em;\r\npadding: 10px 0; }\r\n#p-spacing p:first-child {\r\nwidth: 80%;\r\nmargin-left: 10%; }\r\n#p-spacing p:last-child {\r\npadding: 10px 10%; }\r\n}<\/style><\/pre>\n<\/div>\n<div style=\" width: 100%; padding: 30px 0; background: #eee; margin: 40px 0;\" id=\"p-spacing\">\n<p>Paragraph spacing is accomplished through padding and margins.  Space before and space after is . The left margin is also controlled by padding or margins, and the right margin can be controlled by the paragraph width in addition to padding and margins.\n<\/p>\n<p>Paragraph spacing is accomplished through padding and margins.  Space before and space after is . The left margin is also controlled by padding or margins, and the right margin can be controlled by the paragraph width in addition to padding and margins.\n<\/p>\n<p>Do not forget the p + p rule, for subsequent paragraph behavior, and first line rule. and first character pseudo class selections.\n<\/p>\n<\/div>\n<p><br id=\"text-decoration_transform_shadow_stroke\"\/><\/p>\n<h2 class=\"l-head\">Text Decoration, Text Transform, Text Shadow and Text Stroke<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">Though these properties affect the individual character more than the flow of characters, they belong to text and not font properties. The <code>text-decoration: none;<\/code> property\/value combination is most often used to remove the default underline from links. <a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-text-20021024\/#text-decoration-overview\">Text decoration<\/a> is used to add an underline, overlain or strike-through to the text.\n<\/p>\n<p>CSS3 adds the ability to isolate the different parts of this property, and once it becomes adopted, will allow for individual adjustment of style, color and location of the line.\n<\/p>\n<p>The <code>text-transform<\/code> property sets the text to lowercase or uppercase.\n<\/p>\n<p> It is also possible to put a <a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-text-20021024\/#text-shadows\"> shadow<\/a> on the text itself using the <code>text-shadow<\/code>property with the following value: <code>length, length, length, color;<\/code> where the first two values are the horizontal and vertical distance, the next value is the size of the blur and then comes the color.\n<\/p>\n<p>Last but not least is the ability in CSS3 to add a text stroke. This is not yet supported by all browsers but will soon be: <code>text-stroke: width, color;<\/code> <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#text_styles {\r\nfont-size: 3em;\r\nline-height: 1em;\r\ntext-decoration: line-through;\r\n\/* underline, overline, line-through, none *\/\r\ntext-transform: none;\r\n\/* capitalize, uppercase, lowercase *\/\r\ntext-shadow: 25px 25px 9px #469;\r\n\/* h offset, v offset blur values and color *\/\r\ntext-stroke: 1px  #469;\r\n\/* width and color *\/\r\n}<\/style><\/pre>\n<\/div>\n<div style=\"text-align: center; width: 100%; padding: 30px 0; background: #eee; margin: 40px 0;\" id=\"text_styles\">Text Style Properties\n<\/div>\n<p><br id=\"initial\"\/><\/p>\n<h2 class=\"l-head\">Initial Letter<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">Initial letter sets the size and sink for dropped, raised, and sunken initial letters. This is already possible using the pseudo-element selector <code>::first-letter<\/code> but the initial letter property supersedes that in functionality. Though only partially supported as of 2025, it includes initial-letter-align and initial-letter-wrap. I will detail this property once the browsers have settled on its implementation. <\/p>\n<p><br id=\"wrap\"\/><\/p>\n<h2 class=\"l-head\">Text Wrap<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\"> Using the computer\u2019s power to calculate pretty text provides \u201cgood typography\u201d: <code>text-wrap: pretty<\/code>. Each browser can implement the property: Chrome uses it to remove text orphans, which is when only one word remains on the last line. Safari goes much further to create better typography. It not only avoids short last lines, but avoids bad rags. That smooths the ragged edge of the text, keeping it consistent. It does this by implementing hyphenation. Finally, it avoids typographic rivers. That is when spaces created between words form extended vertical white spaces that look like rivers.\n<\/p>\n<p>The other values for text-wrap are the default value of auto, stable, and balance. <code>text-wrap: auto<\/code> is where each line of text is laid out by itself, with no consideration for multiple lines. (This is often called a \u201cfirst-fit\u201d or \u201cgreedy\u201d algorithm.) <code>text-wrap: stable<\/code> is like auto, but used for live text, so the browser does not actively attempt to lay out the text while someone is writing. <code>text-wrap: balance<\/code>. tells the browser to wrap lines to make every line about the same length as the others. This functions well for headlines but not body text. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\np {\r\n\ttext-wrap: pretty;\r\n\/* auto | stable | balanced *\/\r\n}<\/style><\/pre>\n<\/div>\n<p><br id=\"hyphenation\"\/><\/p>\n<h2 class=\"l-head\">Hyphenation<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">Hyphenation. The default value is <hyphens: none<\/code>. <code>hyphens: manual<\/code> requires that you put in your own hyphenation by inserting a conditional soft hyphen <code>U+00AD <\/code> or <code> &amp;shy;<\/code>. <code>hyphens: auto<\/code>breaks words at appropriate hyphenation points as determined by the conditional soft hyphen character or automatically by the browser using a hyphenation resource. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\np {\r\n\thyphens: auto;\r\n\/* none | manual | auto *\/\r\n}<\/style><\/pre>\n<\/div>\n<p><br id=\"text-rendering\"\/><\/p>\n<h2 class=\"l-head\">Font Kerning and Text Rendering<\/h2>\n<p><a href=\"#TofContents\"><\/a><\/p>\n<p class=\"pat\">The <code>font-kerning<\/code> property sets the use of the kerning information stored in a font. The values are <code>auto<\/code> where the browser determines whether or not to use the stored kerning information. Some browsers will disable kerning on small fonts, since applying it could harm the readability of text. <code>normal<\/code> Font kerning information stored in the font must be applied. <code>none<\/code> Font kerning information stored in the font is disabled.<\/p>\n<p>The <code>text-rendering<\/code> property improves kerning pairs &#038; ligatures using text-rendering to optimize legibility. <code>text-rendering: optimizeLegibility<\/code> CSS property enables high-quality kerning and ligatures in certain browsers. Newer browsers have this behavior enabled by default.\n<\/p>\n<p>Other values for <code>text-rendering<\/code> are auto, optimizeSpeed, and geometicPrecision. <code>auto<\/code> balances quality and performance. <code>optimizeSpeed<\/code>emphasizes rendering speed over legibility. <code>geometricPrecision<\/code> when drawing text. It disables kerning and ligatures.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\np {\r\n\ttext-rendering: optimizeLegibility;\r\n\/* auto | optimizeSpeed | optimizeLegibility | geometricPrecision  *\/\r\n}<\/style><\/pre>\n<\/div>\n<p><br id=\"white-space\"\/><\/p>\n<h2 class=\"l-head\">White Space<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\"><a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-text-20021024\/#white-space-props\">White space processing and line feed behavior<\/a> are ubiquitous defaults that determine the behavior of how text flows in an HTML document. The default behavior is to collapse multiple spaces into one space and to ignore returns. Some of the tags, like <code>&lt;pre><\/code> do make use of a change in whitespace, rendering the text as it is written, preserving multiple white spaces and line feeds. I use the <code>&lt;pre><\/code> in the CSS code view for that purpose, for example.\n<\/p>\n<p>You can change the white space defaults by changing the value of the <code>white-space-treatment<\/code> property: <code>ignore, preserve, ignore-if-before-linefeed, ignore-if-after-linefeed, ignore-if-surrounding-linefeed <\/code>. The same is true of line feeds (or carriage returns, remember the type writer?) with the <code> linefeed-treatment<\/code> property: <code> auto, ignore, preserve, treat-as-space, treat-as-zero-width-space, ignore-if-after-linefeed<\/code>. The shorthand for white space processing is the <code>white-space<\/code> property and the values are: <code>normal, pre, nowrap, pre-wrap, pre-lines<\/code>. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#space {\r\n\twhite-space: normal;\r\n\/*normal, pre, nowrap, pre-wrap, pre-lines*\/\r\n}\r\n<\/style><\/pre>\n<\/div>\n<pre style=\"width: 300px; margin: 20px auto; padding: 20px; border: 3px solid #aaa; background: #eee\" id=\"space\">\r\n<h3>White Space and Line Return Demo<\/h3>\r\nThe space in default white-space collapses and returns are ignored. Change that default behavior.\r\n#space h3{\r\n\tletter-spacing: .1em;\r\n\tword-spacing: .1em;\r\n}\r\n#space p {\r\n\twhite-space: pre;\r\n}\r\n<\/pre>\n<\/p>\n<p>Change the <code>white-space<\/code> from <code>normal<\/code> to <code>pre<\/code> or <code>pre-wrap<\/code> and you&#8217;ll see the text as it is in the HTML text editor, with soft-wrap off or, as in this example, on: <\/p>\n<pre style=\"width: 300px; margin: 20px auto; padding: 20px; border: 3px solid #aaa; background: #eee\">\r\n<h3>White Space and Line Return Demo<\/h3>\r\nThe space in default white-space collapses and returns are ignored. Change that default behavior.\r\n#space h3{\r\n\tletter-spacing: .1em;\r\n\tword-spacing: .1em;\r\n}\r\n#space p {\r\n\twhite-space: pre;\r\n}\r\n<\/pre>\n<\/p>\n<p><\/hyphens:><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contents Paragraph Alignment First Line Indent Text Overflow Spacing Vertical Alignment Leading Paragraph Spacing Text Decoration Transform Shadow &#038; Stroke Initial Letter Text Wrap H&#038;J Kerning &#038; Ligatures White Space Text is how the characters are arranged in the flow. &hellip; <a href=\"http:\/\/b.parsons.edu\/~dejongo\/06-text-formatting\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/374"}],"collection":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=374"}],"version-history":[{"count":40,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/374\/revisions"}],"predecessor-version":[{"id":6522,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/374\/revisions\/6522"}],"wp:attachment":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=374"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}