Drop Cap

From DPWiki
Jump to: navigation, search
DP Official Documentation - Post-Processing and Post-Processing Verification

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>Illustrated Drop-Cap Example</title>

  <style type="text/css">
<!--
p
{
  text-align: justify;
}

h2
{
  text-align: center;
  clear: both;
  font-weight: normal;
  font-size: large;
  margin: 4em auto 1em auto;
  line-height: 1.5;
}

.upper-case
{
  text-transform: uppercase;
}

body
{
  width: 80%;
  max-width: 35em;
  margin: auto;
}

img.drop-cap
{
  float: left;
  margin: 0 0.5em 0 0;
}

p.drop-cap:first-letter
{
  color: transparent;
  visibility: hidden;
  margin-left: -0.9em;
}

.x-ebookmaker img.drop-cap
{
  display: none;
}

.x-ebookmaker p.drop-cap:first-letter
{
  color: inherit;
  visibility: visible;
  margin-left: 0;
}
-->
  </style>
</head>

<body>

<h2>CHAPTER II<br/>
<small>THE SILK-HOUSE</small></h2>

<div>
  <img class="drop-cap" src="images/drop-m.png" width="100" height="113" alt=""/>
</div>

<p class="drop-cap"><span class="upper-case">Marie’s</span> prediction proved a true one,
for within another fortnight the
mulberry buds were tipped with
green, and it was evident they
would be in leaf with the coming
of a few more days of warm sunshine.</p>

<p>“Our silk-growing will begin in earnest now,”
declared Madame Bretton, “and before it does I
think we’d better take one last careful survey of
the silk-house to make sure that everything is all
right.”</p>

</body>

</html>

Screenshot

Drop Cap Example


To comment or request edits to this page, please contact lhamilton.

Return to DP Official Documentation Menu