<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      p {
        font-family: "{{.fontFamily}}";
        font-size: {{.fontSize}}px;
        white-space: word-wrap;
        word-wrap: break-word;
        color: {{.textColor}};
        width: {{.maxSpan}}px;
        margin: 0;
      }
      body {
        background-color:{{.backgroundColor}};
        -webkit-text-size-adjust:none;
      }
      div {
        -webkit-writing-mode: horizontal-tb;
        /* height: 2em; */
      }
      .vertical-center-element {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      img {
      {{if isVertical}}
        width: 1em;
      {{else}}
        height: 1em;
      {{end isVertical}}
      }
      /* Books opts out of smart invert but WebKit's default stylesheet inverts images,video,picture. Invert the invert. */
      @media (inverted-colors) {
          img:not(picture>img), picture { filter: invert(0); }
          video { filter: invert(0) !important; }
      }
    </style>
  </head>
  <body>
    <div class="vertical-center-element">
      <p id="content_container" class="contents">
        {{.contents}}
      </p>
    </div>
  </body>
</html>
