Well, it tells people things, for a start. Without words, your images have an awful lot of work to
do. Aside from this flippant point, it should go without saying (although I’ll say it anyway) that
your text should be legible, to the point, and within easy reach. Visitors are rarely coming to a
web site to sit back and admire your graphics—it is most often information they are seeking.
Graphic embellishments are often mere decoration.
The issue of accessibility is an important one here. Responsible web developers spend a lot
of time ensuring that their designs are not compromised under user-defined viewing situations.
For example, if a style sheet is not available, or images are turned off, the image-based
buttons in the navigation bar will need replacement text to assist navigation. Equally important
is replacement text for general images, especially images that convey a particular message
or act as a link to another page, and there are many circumstances where background colors
can conflict with text of the same color when images are absent. Issues such as these need consideration at every stage of the design process. Essentially,
your web site should make just as much sense with or without all images, and the hierarchy of
your content should remain apparent in any situation.
Showing posts with label why. Show all posts
Showing posts with label why. Show all posts
Saturday, October 23, 2010
Sunday, September 26, 2010
Defining link states with CSS
CSS has advantages over the obsolete HTML method of defining link states. You gain control
over the hover and focus states and can do far more than just edit the state colors—
although that’s what we’re going to do first.
Anchors can be styled by using a tag selector:
a {
color: #3366cc;
}
In this example, all anchors on the page—including links—are turned to a medium blue.
However, individual states can be defined by using pseudo-class selectors (so called
because they have the same effect as applying a class, even though no class is applied to
the element):
a:link {
color: #3366cc;
}
a:visited {
color: #666699;
}
a:hover {
color: #0066ff;
}
a:focus {
background-color: #ffff00;
}
a:active {
color: #cc00ff;
}
over the hover and focus states and can do far more than just edit the state colors—
although that’s what we’re going to do first.
Anchors can be styled by using a tag selector:
a {
color: #3366cc;
}
In this example, all anchors on the page—including links—are turned to a medium blue.
However, individual states can be defined by using pseudo-class selectors (so called
because they have the same effect as applying a class, even though no class is applied to
the element):
a:link {
color: #3366cc;
}
a:visited {
color: #666699;
}
a:hover {
color: #0066ff;
}
a:focus {
background-color: #ffff00;
}
a:active {
color: #cc00ff;
}
Monday, September 20, 2010
Working with style sheets for print
In the old days (and, frankly, in the not-so-old days, since the practice somehow survives),
designers often worked on so-called printer-friendly sites, run in parallel with the main
site. However, if you’re using CSS layouts, it’s possible to create a style sheet specifically for
print, which you can use to dictate exactly which elements on the page you want to print,
which you want to omit, and how you want to style those that can be printed.
As mentioned earlier in the book, a print style sheet is attached to web pages using the
following HTML:
<link rel="stylesheet" type="text/css"media="print"
å href="print-style-sheet.css" />
The media attribute value of print restricts the CSS solely to print, and within the print
style sheet, you define styles specifically for print, such as different fonts and margins. In
the example in the download files, I’ve used a version of the business website, which you
can access via the sme-website-print folder in the chapter 10 folder. The print style
sheet is sme-print.css, and if you compare it to the main style sheet, you’ll see that it’s
much simpler and massively honed down.
The defaults section houses a single body rule, defining padding (to take into account varying
printer margins, 5% is a good horizontal padding to use), the background color (white
is really the only choice you should use, and it’s usually the default, but setting it explicitly
ensures this is the case), the text color (black is best for contrast when printing), and the
font. There’s absolutely no point in trying to ape your onscreen design and typography in
print—instead, use values that enhance the printed version. In the example’s body rule
(shown in the following code block), serif fonts are defined for font-family, because serifs
are easier to read in print. Note that you’re not only restricted to web-safe fonts at this
point either—you can define choices based on fonts that come with the default install of
Windows and Mac OS, hence the choices of Baskerville (Mac) and Palatino Linotype
(Windows), prior to Times New Roman and Times.
body {
padding: 0 5%;
background: #ffffff;
font-family: Baskerville, "Palatino Linotype", "Times New Roman",
å "Times", serif;
line-height: 16pt;
}
In the structure section, the #masthead declaration sets display to none. That’s because
this area of the page is of no use for printed output—you simply don’t need website masthead
and navigation offline. (This is, of course, a generalization, and in rare cases this may
not be applicable; however, in the vast, vast majority of websites I’ve created, the printed
version has not required the masthead and navigation links.) Note that if other areas aren’t
required, just use a grouped selector instead of this rule with a lone selector, as shown in
the following code block (which isn’t in the example CSS):
#element1, #element2, .class1, .class2 {/* these items won't be
å printed */
display: none;
}Because pixel values don’t tend to translate to print well, some settings may need to be
redefined. An example in this case is the two-column section of the page. The widths and
margins were initially defined in pixels, but in the print CSS, it makes more sense to define
these values in percentages. (Note that the 9.99% value is there in case of rounding
errors.)
.columnLeft, .columnRight {
float: left;
width: 45%;
}
.columnLeft {
margin-right: 9.99%;
}
In the links and navigation section, only one rule remains. While links are of no real use
offline, it’s still a good idea to make it apparent what text-based content was originally a
link, in order for people to be able to find said links should they want to, or for reasons of
context. Just ensuring the default underline is in place should do, and that can be done via
the following rule:
a:link, a:visited {
text-decoration: underline;
}
For browsers other than Internet Explorer (although JavaScript workarounds exist for IE
compatibility—e.g., see www.grafx.com.au/dik//printLinkURLs.html), you can also provide
the href values alongside any printed links by using the following code:
a:link:after, a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
In terms of fonts, keeping things simple makes sense. It’s also worth noting that because
you’re working with print, sizes in points are more useful than sizes in pixels. (Note that
in the body rule, the line-height value was 16pt, not 16px or 1.6em.) Therefore, the
font-size values all reflect that. Note in the p.footer rule that floated content still needs
clearing in the print style sheets.
The final section, images, is not changed much. The images within the columns were
deemed superfluous, and so display has been set to none for .columnLeft img,
.columnRight img. Elsewhere, the margins on the floated image have been set to values in
centimeters (cm) and the border value for #content img is in millimeters (mm), since we’re
working in print. (Values in pixels are permitted, but they tend to be less accurate when
working with print style sheets—for example, if elements have a one-pixel border, they
may not all be even when printed.)
designers often worked on so-called printer-friendly sites, run in parallel with the main
site. However, if you’re using CSS layouts, it’s possible to create a style sheet specifically for
print, which you can use to dictate exactly which elements on the page you want to print,
which you want to omit, and how you want to style those that can be printed.
As mentioned earlier in the book, a print style sheet is attached to web pages using the
following HTML:
<link rel="stylesheet" type="text/css"media="print"
å href="print-style-sheet.css" />
The media attribute value of print restricts the CSS solely to print, and within the print
style sheet, you define styles specifically for print, such as different fonts and margins. In
the example in the download files, I’ve used a version of the business website, which you
can access via the sme-website-print folder in the chapter 10 folder. The print style
sheet is sme-print.css, and if you compare it to the main style sheet, you’ll see that it’s
much simpler and massively honed down.
The defaults section houses a single body rule, defining padding (to take into account varying
printer margins, 5% is a good horizontal padding to use), the background color (white
is really the only choice you should use, and it’s usually the default, but setting it explicitly
ensures this is the case), the text color (black is best for contrast when printing), and the
font. There’s absolutely no point in trying to ape your onscreen design and typography in
print—instead, use values that enhance the printed version. In the example’s body rule
(shown in the following code block), serif fonts are defined for font-family, because serifs
are easier to read in print. Note that you’re not only restricted to web-safe fonts at this
point either—you can define choices based on fonts that come with the default install of
Windows and Mac OS, hence the choices of Baskerville (Mac) and Palatino Linotype
(Windows), prior to Times New Roman and Times.
body {
padding: 0 5%;
background: #ffffff;
font-family: Baskerville, "Palatino Linotype", "Times New Roman",
å "Times", serif;
line-height: 16pt;
}
In the structure section, the #masthead declaration sets display to none. That’s because
this area of the page is of no use for printed output—you simply don’t need website masthead
and navigation offline. (This is, of course, a generalization, and in rare cases this may
not be applicable; however, in the vast, vast majority of websites I’ve created, the printed
version has not required the masthead and navigation links.) Note that if other areas aren’t
required, just use a grouped selector instead of this rule with a lone selector, as shown in
the following code block (which isn’t in the example CSS):
#element1, #element2, .class1, .class2 {/* these items won't be
å printed */
display: none;
}Because pixel values don’t tend to translate to print well, some settings may need to be
redefined. An example in this case is the two-column section of the page. The widths and
margins were initially defined in pixels, but in the print CSS, it makes more sense to define
these values in percentages. (Note that the 9.99% value is there in case of rounding
errors.)
.columnLeft, .columnRight {
float: left;
width: 45%;
}
.columnLeft {
margin-right: 9.99%;
}
In the links and navigation section, only one rule remains. While links are of no real use
offline, it’s still a good idea to make it apparent what text-based content was originally a
link, in order for people to be able to find said links should they want to, or for reasons of
context. Just ensuring the default underline is in place should do, and that can be done via
the following rule:
a:link, a:visited {
text-decoration: underline;
}
For browsers other than Internet Explorer (although JavaScript workarounds exist for IE
compatibility—e.g., see www.grafx.com.au/dik//printLinkURLs.html), you can also provide
the href values alongside any printed links by using the following code:
a:link:after, a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
In terms of fonts, keeping things simple makes sense. It’s also worth noting that because
you’re working with print, sizes in points are more useful than sizes in pixels. (Note that
in the body rule, the line-height value was 16pt, not 16px or 1.6em.) Therefore, the
font-size values all reflect that. Note in the p.footer rule that floated content still needs
clearing in the print style sheets.
The final section, images, is not changed much. The images within the columns were
deemed superfluous, and so display has been set to none for .columnLeft img,
.columnRight img. Elsewhere, the margins on the floated image have been set to values in
centimeters (cm) and the border value for #content img is in millimeters (mm), since we’re
working in print. (Values in pixels are permitted, but they tend to be less accurate when
working with print style sheets—for example, if elements have a one-pixel border, they
may not all be even when printed.)
One final thing that’s useful to know is how to create print-only content. In this example,
removing the masthead from the print output has also removed the site’s corporate ID. A
cunning way to bring this back is to create a black-and-white version of the company logo,
and add that as the first item on the web page, within a div that has an id value of
printLogo.
<div id="printLogo">
<img src="assets/we-lay-floors-bw-logo.gif" alt="Web Lay Floors,
å Inc. logo" width="267" height="70" />
</div>
Then, in the main style sheet, create a rule that displays this element offscreen when the
page is loaded in a browser window.
#printLogo {
position: absolute;
left: -1000px;
}
The content will then show up in print, but not online. Note, however, that you should be
mindful to not hide weighty images in this manner, otherwise you’ll compromise download
speeds for anyone using your website in a browser, only for making things slightly better
for those printing the site. A small, optimized GIF should be sufficient.
If there’s other content you want to hide in this manner, you can also create a generic
printOnly class to apply to elements you want hidden in the browser, but visible in print.
The following CSS rule applied to your screen style sheet would be sufficient for doing
this:
.printOnly {
display: none;
}
The reason for not using this generic method with the logo is because at the time of writing,
Opera appears to only print images cached from the normal page view—in other
words, if the image isn’t displayed in the standard browser window, Opera won’t print it.
Therefore, if using the generic printOnly class, be aware that any images hidden won’t
print in Opera, but text will.
An example of how the print style sheet looks is shown in the following screenshot.
removing the masthead from the print output has also removed the site’s corporate ID. A
cunning way to bring this back is to create a black-and-white version of the company logo,
and add that as the first item on the web page, within a div that has an id value of
printLogo.
<div id="printLogo">
<img src="assets/we-lay-floors-bw-logo.gif" alt="Web Lay Floors,
å Inc. logo" width="267" height="70" />
</div>
Then, in the main style sheet, create a rule that displays this element offscreen when the
page is loaded in a browser window.
#printLogo {
position: absolute;
left: -1000px;
}
The content will then show up in print, but not online. Note, however, that you should be
mindful to not hide weighty images in this manner, otherwise you’ll compromise download
speeds for anyone using your website in a browser, only for making things slightly better
for those printing the site. A small, optimized GIF should be sufficient.
If there’s other content you want to hide in this manner, you can also create a generic
printOnly class to apply to elements you want hidden in the browser, but visible in print.
The following CSS rule applied to your screen style sheet would be sufficient for doing
this:
.printOnly {
display: none;
}
The reason for not using this generic method with the logo is because at the time of writing,
Opera appears to only print images cached from the normal page view—in other
words, if the image isn’t displayed in the standard browser window, Opera won’t print it.
Therefore, if using the generic printOnly class, be aware that any images hidden won’t
print in Opera, but text will.
An example of how the print style sheet looks is shown in the following screenshot.
Note that you can take things further in terms of layout, but it’s best to keep it simple.
Also, ensure that you use the Print Preview functions of your browser test suite to thoroughly
test your print style sheet output and ensure that there are no nasty surprises for
visitors to your site. Ultimately, it’s worth the extra hassle—just amending the fonts and
page margins and removing images and page areas that are irrelevant to the printed version
of the site not only improves your users’ experience, but also makes the site seem
more professional.
Also, ensure that you use the Print Preview functions of your browser test suite to thoroughly
test your print style sheet output and ensure that there are no nasty surprises for
visitors to your site. Ultimately, it’s worth the extra hassle—just amending the fonts and
page margins and removing images and page areas that are irrelevant to the printed version
of the site not only improves your users’ experience, but also makes the site seem
more professional.
Tuesday, September 14, 2010
Inline lists for navigation
Although most people think of lists as being vertically aligned, you can also display list
items inline. This is particularly useful when creating navigation bars, as you’ll see in
Chapter 5. To set a list to display inline, you simply add display: inline; to the li
selector. Adding list-style-type: none; to the ul selector ensures that the list sits
snug to the left of its container (omitting this tends to indent the list items). Adding a
margin-right value to li also ensures that the list items don’t sit right next to each other.
Here’s an example:
ul {
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
items inline. This is particularly useful when creating navigation bars, as you’ll see in
Chapter 5. To set a list to display inline, you simply add display: inline; to the li
selector. Adding list-style-type: none; to the ul selector ensures that the list sits
snug to the left of its container (omitting this tends to indent the list items). Adding a
margin-right value to li also ensures that the list items don’t sit right next to each other.
Here’s an example:
ul {
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
List style shorthand
As elsewhere in CSS, there is a shorthand property for list styles, and this is the aptly
named list-style property. An example of its use is shown in the following piece of CSS:
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url(bullet.gif);
}
which can be rewritten as follows:
ul {
list-style: square inside url(bullet.gif);
}
named list-style property. An example of its use is shown in the following piece of CSS:
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url(bullet.gif);
}
which can be rewritten as follows:
ul {
list-style: square inside url(bullet.gif);
}
list-style-type property
The list-style-type property is used to amend the bullets in an unordered or ordered
list, enabling you to change the default bullets to something else (other than a custom
image). In an unordered list, this defaults to disc (a black bullet), but other values are
available, such as circle (a hollow disc bullet), square (a square bullet), and none, which
results in no bullet points. For ordered lists, this defaults to decimal (resulting in a numbered
list), but a number of other values are available, including lower-roman (i, ii, iii, etc.)
and upper-alpha (A, B, C, etc.) A full list of supported values is in Appendix D (CSS
Reference).
Generally speaking, the values noted are the best supported, along with the upper and
lower versions of roman and alpha for ordered lists. If a browser doesn’t understand the
numbering system used for an ordered list, it usually defaults to decimal. The W3C recommends
using decimal whenever possible, because it makes web pages easier to navigate.
I agree—things like alpha and roman are too esoteric for general use, plus there’s
nothing in the CSS specifications to tell a browser what to do in an alphabetic system after
z is reached (although most browsers are consistent in going on to aa, ab, ac, etc.).
list, enabling you to change the default bullets to something else (other than a custom
image). In an unordered list, this defaults to disc (a black bullet), but other values are
available, such as circle (a hollow disc bullet), square (a square bullet), and none, which
results in no bullet points. For ordered lists, this defaults to decimal (resulting in a numbered
list), but a number of other values are available, including lower-roman (i, ii, iii, etc.)
and upper-alpha (A, B, C, etc.) A full list of supported values is in Appendix D (CSS
Reference).
Generally speaking, the values noted are the best supported, along with the upper and
lower versions of roman and alpha for ordered lists. If a browser doesn’t understand the
numbering system used for an ordered list, it usually defaults to decimal. The W3C recommends
using decimal whenever possible, because it makes web pages easier to navigate.
I agree—things like alpha and roman are too esoteric for general use, plus there’s
nothing in the CSS specifications to tell a browser what to do in an alphabetic system after
z is reached (although most browsers are consistent in going on to aa, ab, ac, etc.).
Styling semantic markup: A traditional example with serif fonts and a baseline grid
Required files styling-semantic-text-starting-point.html, stylingsemantic-
text-starting-point.css, and styling-semantictext-
baseline.gif from the chapter 3 folder.
What you’ll learn How to create a page of traditional-looking text as per a printed
book. The text adheres strictly to a baseline grid, maintaining the
page’s vertical rhythm. This requires some extra calculations when
it comes to defining line-height values.
Completed files styling-semantic-text-3.html and styling-semantic-text-3.
css from the chapter 3 folder.
text-starting-point.css, and styling-semantictext-
baseline.gif from the chapter 3 folder.
What you’ll learn How to create a page of traditional-looking text as per a printed
book. The text adheres strictly to a baseline grid, maintaining the
page’s vertical rhythm. This requires some extra calculations when
it comes to defining line-height values.
Completed files styling-semantic-text-3.html and styling-semantic-text-3.
css from the chapter 3 folder.
1. Define a default font for the page. Using a body rule, a default font is chosen for
the web page. This design primarily uses the Georgia font—a serif—to enhance the
traditional feel.
body {
font-family: Georgia, "Times New Roman", Times, serif;
}
At this point, it’s also important to decide on a target line-height value for the
page. For this example, it’s going to be 18px.
2. Style the main heading. Here’s where things get a little tricky. For these examples,
we’re working with relative units. As mentioned earlier in the chapter, the 62.5%
method means that you can define font sizes by setting the font-size value to a
setting in ems that’s one-tenth of the target size in pixels. So, in the following code
block, the h1 rule’s font-size value of 1.8em means it’s effectively displayed at
18 pixels (assuming the user hasn’t messed around with their browser’s default settings,
again as mentioned earlier).
For the line-height value to hit the target of 18 pixels, it must therefore
be 18 pixels or a multiple of it. However, when using ems, this value is relative to
the font-size value. One em is equal to the height of one character, and since
the font-size has been set to 1.8em (which is equivalent to 18 pixels), we set
line-height to 1em. This makes the line-height of the h1 element the equivalent
of 18 pixels.
Similar thinking is used to define the value for margin-bottom—this needs to be
18 pixels to keep the vertical rhythm going, so the value is set to 1em.
h1 {
font-size: 1.8em;
line-height: 1em;
margin-bottom: 1em;
}
the web page. This design primarily uses the Georgia font—a serif—to enhance the
traditional feel.
body {
font-family: Georgia, "Times New Roman", Times, serif;
}
At this point, it’s also important to decide on a target line-height value for the
page. For this example, it’s going to be 18px.
2. Style the main heading. Here’s where things get a little tricky. For these examples,
we’re working with relative units. As mentioned earlier in the chapter, the 62.5%
method means that you can define font sizes by setting the font-size value to a
setting in ems that’s one-tenth of the target size in pixels. So, in the following code
block, the h1 rule’s font-size value of 1.8em means it’s effectively displayed at
18 pixels (assuming the user hasn’t messed around with their browser’s default settings,
again as mentioned earlier).
For the line-height value to hit the target of 18 pixels, it must therefore
be 18 pixels or a multiple of it. However, when using ems, this value is relative to
the font-size value. One em is equal to the height of one character, and since
the font-size has been set to 1.8em (which is equivalent to 18 pixels), we set
line-height to 1em. This makes the line-height of the h1 element the equivalent
of 18 pixels.
Similar thinking is used to define the value for margin-bottom—this needs to be
18 pixels to keep the vertical rhythm going, so the value is set to 1em.
h1 {
font-size: 1.8em;
line-height: 1em;
margin-bottom: 1em;
}
3. Style the subheading. For the subheading, the font-size value is set to 1.4em. To
keep the line-height vertical rhythm going, you need to find the value that will
multiply with the font-size setting to create 1.8 (since 1.8em is the equivalent of
18 pixels). You can get this by dividing 1.8 by the font-size value, which results in
a line-height value of 1.2857142em. To keep the rhythm going, this setting can
then be used for both the margin-top and margin-bottom values.
h2 {
font-size: 1.4em;
line-height: 1.2857142em;
margin-top: 1.2857142em;
margin-bottom: 1.2857142em;
}
However, what this serves to do is isolate the heading on its own line, rather than
making it obviously lead to the subsequent paragraph. Two solutions exist for dealing
with this. The first is simply to remove the bottom margin; the second is to
create asymmetrical margins, making the top margin larger than the bottom one.
To keep the entire space the element takes up strictly within the grid and not interrupt
the vertical rhythm too much, it’s sensible to take half the margin-bottom
value and add it to the margin-top value.
h2 {
font-size: 1.4em;
line-height: 1.2857142em;
margin-top: 1.9285713em;
margin-bottom: 0.6428571em;
}
4. Style the crossheads and paragraphs. For this example, the crossheads and paragraphs
are identical, save for the default styling on the headings that renders them
in bold. The font-size value is 1.2em. Again, 1.8 is divided by the font-size figure
to arrive at the line-height and margin values, both of which are set to 1.5em.
Note that the h3 rule has no margin-bottom value, meaning that each level-three
heading hugs the subsequent paragraph.
h3 {
font-size: 1.2em;
line-height: 1.5em;
margin-top: 1.5em;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}
At this point, your page should look like the following image.
keep the line-height vertical rhythm going, you need to find the value that will
multiply with the font-size setting to create 1.8 (since 1.8em is the equivalent of
18 pixels). You can get this by dividing 1.8 by the font-size value, which results in
a line-height value of 1.2857142em. To keep the rhythm going, this setting can
then be used for both the margin-top and margin-bottom values.
h2 {
font-size: 1.4em;
line-height: 1.2857142em;
margin-top: 1.2857142em;
margin-bottom: 1.2857142em;
}
However, what this serves to do is isolate the heading on its own line, rather than
making it obviously lead to the subsequent paragraph. Two solutions exist for dealing
with this. The first is simply to remove the bottom margin; the second is to
create asymmetrical margins, making the top margin larger than the bottom one.
To keep the entire space the element takes up strictly within the grid and not interrupt
the vertical rhythm too much, it’s sensible to take half the margin-bottom
value and add it to the margin-top value.
h2 {
font-size: 1.4em;
line-height: 1.2857142em;
margin-top: 1.9285713em;
margin-bottom: 0.6428571em;
}
4. Style the crossheads and paragraphs. For this example, the crossheads and paragraphs
are identical, save for the default styling on the headings that renders them
in bold. The font-size value is 1.2em. Again, 1.8 is divided by the font-size figure
to arrive at the line-height and margin values, both of which are set to 1.5em.
Note that the h3 rule has no margin-bottom value, meaning that each level-three
heading hugs the subsequent paragraph.
h3 {
font-size: 1.2em;
line-height: 1.5em;
margin-top: 1.5em;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}
At this point, your page should look like the following image.
5. Add a (temporary) grid. When working on text that adheres to a baseline grid, it
can help to create a tiled background image that you can use to check whether
your measurements are accurate. The 18-pixel-high image file, styling-semantictext-
baseline.gif, has a single-pixel line at the bottom of the image. When
applied to the wrapper div’s background via the #wrapper rule (see the following
code), a ruled background is shown. Although intended as a temporary design aid,
you could retain the grid permanently, because it can help readers to rapidly skim
text. However, the aid only works when a browser is using default settings—when
the text is enlarged, the background image stays as it is, resulting in the grid of the
image and the grid of the text being out of sync.
#wrapper {
margin: 0 auto;
width: 400px;
background: url(styling-semantic-text-baseline.gif);
}
The following image shows how this image works behind the text styled in this
exercise—as you can see, the vertical rhythm is maintained right down the page.
can help to create a tiled background image that you can use to check whether
your measurements are accurate. The 18-pixel-high image file, styling-semantictext-
baseline.gif, has a single-pixel line at the bottom of the image. When
applied to the wrapper div’s background via the #wrapper rule (see the following
code), a ruled background is shown. Although intended as a temporary design aid,
you could retain the grid permanently, because it can help readers to rapidly skim
text. However, the aid only works when a browser is using default settings—when
the text is enlarged, the background image stays as it is, resulting in the grid of the
image and the grid of the text being out of sync.
#wrapper {
margin: 0 auto;
width: 400px;
background: url(styling-semantic-text-baseline.gif);
}
The following image shows how this image works behind the text styled in this
exercise—as you can see, the vertical rhythm is maintained right down the page.
Subscribe to:
Posts (Atom)