Re: KMail HTML viewer: font size

Erik Quaeghebeur <[email protected]> Sat, 10 Dec 2016 23:04:57 +0100

Newsgroups	gmane.comp.kde.users.pim
Message-ID	<1602470.m85nVeLVui@sysoppad>

> is there a way to change the font size in KMail's HTML viewer? I have a 
> MacBookPro 12,1 13" (Early 2015) with retina display (HiDPI), and the rendered 
> HTML messages appear way too small to be read. 
> 
> Lastly, but this is a minor drawback, is it possible to enlarge the font used 
> for the subject line? By default it is smaller than the font used for the 
> From, To, and Date fields, and it appears weird.

The latter issue can certainly be dealt with by creating a custom header theme using the Grantlee functionality and perhaps also the former, given that with the Grantlee theme can have an impact beyond the header.

To learn about Grantlee themeing, I suggest googling for "grantlee kmail" and similar queries.
There is a GUI, but I only got some success in creating my own theme (nothing related to HiDPI) by creating it manually. Documentation is scarce… and there are some issues, for example https://bugs.kde.org/show_bug.cgi?id=364176 and that external CSS (so not in the HTML file itself) do not seem to work.

For me, the themes are in

	$HOME/.kde4/share/apps/messageviewer/themes/

each in their own directory.

I've put a theme I've made in attachment. You can see that with the CSS you can have control over both the header (which you can wholly design using the theme HTML-like language) and the body (whose HTML you cannot control).


Success,

Erik

header-content.html (text/html, 874 B)

<h1 dir="{{ header.subjectDir }}">{{ header.subject|safe }}</h1>
<div id="date" dir="{{ dateDir }}">{{ header.dateshort }}</div>
<ul>
  {% if header.from %}
  <li>
    <span class="key">Van</span>
    <span class="value">
      {{ header.from|safe }}
      {% if header.organization %}
          ({{ header.organization|safe }})
      {% endif %}
    </span>
  </li>
  {% endif %}
  {% if header.to %}
  <li>
    <span class="key">Aan</span>
    <span class="value">{{ header.toExpandable|safe }}</span>
  </li>
  {% endif %}
  {% if header.cc %}
  <li>
    <span class="key">Cc</span>
    <span class="value">{{ header.ccExpandable|safe }}</span>
  </li>
  {% endif %}
  {% if header.bcc %}
  <li>
    <span class="key">Bcc</span>
    <span class="value">{{ header.bccExpandable|safe }}</span>
  </li>
  {% endif %}
</ul>
<!-- <div id="attachmentInjectionPoint"></div> -->

header.html (text/html, 1.7 KB)

<!-- <link href="{{ header.absoluteThemePath }}/style.css" rel="stylesheet" type="text/css" /> -->
<style type="text/css">
  body {
    margin: 0;
    padding: 0;
  }

  div#kmailPage > header {
    z-index: 2;
    position: fixed;
    width: 96%; /* 100% is too wide... */
    overflow: auto;
    background-color: Ivory;
    padding: 1ex 1em;
    border-top: .3ex solid SteelBlue;
    border-bottom: 1px dashed SteelBlue;
  }

  div#kmailPage > div#headerDummy {
    z-index: 0;
    visibility: hidden;
    overflow: auto;
    padding: 1ex 1em;
    border-top: .3ex;
    border-bottom: 1px;
  }

  div#kmailPage > header > h1, div#kmailPage > div#headerDummy > h1 {
    clear: both;
    font-size: 100%;
    font-weight: bold;
  }

  div#kmailPage > header > div#date, div#kmailPage > div#headerDummy > div#date {
    color: DimGray;
    font-weight: bold;
    font-style: italic;
  }

  div#kmailPage > header > ul, div#kmailPage > div#headerDummy > ul {
    display: table;
    border-collapse: separate;
    border-spacing: 1em 1ex;
    margin: 0;
    padding: 0;
  }

  div#kmailPage > header > ul > li, div#kmailPage > div#headerDummy > ul > li {
    display: table-row;
    padding-bottom: 1ex;
  }

  div#kmailPage > header > ul > li > span, div#kmailPage > div#headerDummy > ul > li > span {
    display: table-cell;
  }

  div#kmailPage > header > ul > li > span.key, div#kmailPage > div#headerDummy > ul > li > span.key {
    text-align: right;
  }

  div#kmailPage > div#kmailContent {
    z-index: 1;
    padding: 3ex 2em 2ex;
    background-color: White;
  }
</style>
<div id="kmailPage">
  <header dir="ltr">
    {% include "header-content.html" %}
  </header>
  <div id="headerDummy" dir="ltr">
    {% include "header-content.html" %}
  </div>
  <div id="kmailContent">

header.desktop (application/x-desktop, 184 B) - not displayed