Display long texts with CSS, tutorial and example

Last week, I improved the CSS file that displays the (mostly long) texts of the German Political Speeches Corpus, which I introduced in my last post (“Introducing the German Political Speeches Corpus and Visualization Tool”). The texts should be easier to read now (though I do not study this kind of readability), you can see an example here (BP text 536).

I looked for ideas to design a clean and simple layout, but I did not find what I needed. So I will outline in this post the main features of my new CSS file:

• First of all, margins, font-size and eventually font-family are set for the whole page :

  html {
      margin-left: 10%;
      margin-right: 10%;
      font-family: sans-serif;
      font-size: 10pt;
  }
  

• Two frames, one for the main content and one for the footer, denoted as div in the XHTML file.

  div.framed {
      padding-top: 1em;
      padding-bottom: 1em;
      padding-left: 7%;
      padding-right: 7%; 
      border: 1px solid #736F6E;
      margin-bottom: 10px;
  }
  

  NB: I know there is a faster way to set the padding but I like to keep things clear. - I chose to use the good old separation rule, hr in XHTML with custom (adaptable) spacing in the CSS : :::css hr { margin-top: 2.5em; margin-bottom: 2.5em; } This way title and text are much easier to distinguish. - Apart from the titles, which should be no mystery, another way to make the text look better is to justify and indent it, say for all paragraphs: :::css p { text-align: justify; text-indent: 1.5em; }

I hope it helped!