R Markdown with the DOCCO linear style

Question

I was about to write a package's vignette using DOCCO linear style that is supported by knitr package (knitr).

In their example vignette there appears a nice graphic at the begging and at the end of HTML file.

But when I tried to maintain my own vignette those graphics didn't appear and instead of them there appear a huge 8 and h letter :P Like below: .

Can any1 tell me why this is happening and maby how to fix this?

I am converting my vignette written in .Rmd to .HTML using this syntax:

Vignette:

<!--
%\VignetteEngine{knitr::docco_linear}
%\VignetteIndexEntry{The archivist package compedium}
-->

# The archivist package compedium

```{r}
summary(cars)
```

and function to convert this:

knitr::knit2html(input = "vignettes/archivist.Rmd", 
                 output = "vignettes/archivist.md", 
                 template = system.file("misc", "docco-template.html", 
                 package = "knitr"))

Note that you should have npm installed on you computer.

Installing via terminal:

sudo apt-get install npm

and then installing docco:

sudo npm install -g docco

Thanks for any advice !

EDIT:

Firstly, after markdown compilation, I opened my vignette file under ubuntu's firefox on an Oracle Virtual Machine where it was created because I could not download and install docoo on a Windows. It appears with ugly 8 in output file.

But when I sent this file via e-mail to myself and opened it on a Windows it looked perfectly as I desired it when producing. Check below

And so, I opened knitr vignette manual explaining the docco style on a ubuntu on Virtual Machine in firefox and it appears it has the same 8 sign !

I think it must be some kind of encoding problem ? Am I right? Good it works and looks good after sending it to a Windows :P Can any1 explain me this nonsense I lost most of my day on ?

Thanks :)

Answer 1

That content is added via CSS in the docco.css file. For the header image, they have

h1:after {
  content: "8";
  display: block;
  font-family: "fleurons";
  color: #999;
  font-size: 80px;
  padding: 10px 0 25px;
}

So they are inserting an "8" into the page after the header. But they have specified the font as "fleurons". This is a webfont they have also defined in the same css file.

@font-face {
    font-family: 'fleurons';
    src: url('public/fonts/fleurons.eot');
    src: url('public/fonts/fleurons.eot?#iefix') format('embedded-opentype'),
         url('public/fonts/fleurons.woff') format('woff'),
         url('public/fonts/fleurons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

So in order to get the "8" to look like the fancy symbol they have, you need to have this particular webfont available to your webpage. Same goes for the "h" at the end of the page as well.