Typography

This test shows the usage of the :first-letter and :first-line pseudo selectors.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  (OK)
no support for box-shadow
PrinceXML  OK
Antennahouse  OK
Weasyprint  (OK)
no support for box-shadow
PagedJS  UNSUPPORTED
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <h2>My heading (:first-letter)</h2>
        <p id="first-letter">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
          ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
          dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>

        <h2>My heading (:first-line)</h2>
        <p id="first-line">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
          ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
          dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
    </body>
</html>

Stylesheet

@import url("../styles/a4.css");

p {
  width: 500px;
  line-height: 1.5;
}

h2 + p#first-letter::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

h2 + p#first-line::first-line{
  color: red;
  background-color: #ddd;
  font-size: 1.4em;
}