4

I am preparing slides using markdown and using pandoc to convert them to HTML slides for use with reveal.js.

The resulting titles default to uppercase. I want them to appear in "titlecase" where each word is capitalized, but not all letters are.

Which setting in which file enforces uppercase titles?

And what is the recommended method of changing it to "titlecase"?

Thanks.

chandra
  • 292
  • 2
  • 11
  • One needs to change the template file for themes and recompile from `.scss` to `.css`. Alternatively, to change an existing theme, one turns off the `text-transform: uppercase;` attribute or modifies it in the `.css` file for the theme. – chandra Nov 01 '17 at 16:16
  • feel free to answer your own question... – mb21 Nov 02 '17 at 11:37

2 Answers2

8

Here is what I finally did:

  1. Create a custom CSS file, say custom.css in the same directory with this/these lines:

    .reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  text-transform: none;
}

  2. Compile with pandoc including the option --css="./custom.css".

The uppercasing of all headers will now be gone. One could of, course use other values for text-transform according to one's requirements.

This method is non-invasive as it does not alter the settings in the reveal.js folder. Moreover, it is also portable in that custom.css file is independent of the reveal.js folder.

tarleb
  • 19,863
  • 4
  • 51
  • 80
chandra
  • 292
  • 2
  • 11
  • 1
    Using a custom css file is apparently the way to go: The text-transform is set in the reveal theme of your choice so either you need to use a theme that does not set it to uppercase, or you need to customly change it the way you did.. – moritzschaefer Dec 01 '18 at 18:30
4

As noted in this issue on the reveal.js site, a quick workaround is to put

<style>
    .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5 {
                  text-transform: none;
          }
</style>

in the <head> of the html file.

KishKash
  • 161
  • 4