Code Club World PDFs need styling

[andylolz]

There are currently no PDF links on the Code Club World project site – they’re all switched off.

Once these PDFs are styled up, we can start generating them automatically.

[andylolz]

@codecleaner are you interested in working on this one, Wojtek? If so, can I assist in getting you started?

It’s a big one – once it’s sorted, we can re-enable Code Club World PDFs (I believe you already figured this step out) which I’m sure would really help clubs around the world.

[codecleaner]

@andylolz Yes, I think I will manage it.

I've tested phantomjs PDF generator with polish resources and I've noticed these problems:

• header title has redundant background,
• longer titles in header makes this header looks bad,
• labels in legend (like "Activity checklist") have to has "no-wrap" option to look nicer,
• text with background has to small font size
• "challenges" are often printed in two pages (I think it should have something like "avoid-page-break" or something like this).

Do you recognize any other issues?

[andylolz]

These are great – thanks!

header title has redundant background

Can you put a screenshot to show what you mean here?

longer titles in header makes this header looks bad

Agreed – this needs fixing.

labels in legend (like "Activity checklist") have to has "no-wrap" option to look nicer

Interesting! I’m not sure what you mean – can you send a screenshot to explain?

text with background has to small font size

Ahhh – you mean the inline code snippets. Agreed – these really need fixing! Look at the manually generated PDFs here to see how they should really look.

"challenges" are often printed in two pages (I think it should have something like "avoid-page-break" or something like this).

It’s page-break-inside: avoid, but it doesn’t work in phantom.js yet :( I added .new-page as a workaround.

Do you recognize any other issues?

There are some others, yes… Mainly, the whole thing needs tightening up. There’s a lot of padding/margins around elements that could be removed.

[codecleaner]

Redundant header background: (this rounded one)

Labels in legend look like this: As you said, it should look like this:

I will try to solve as many problems as possible tomorrow evening.

[andylolz]

Ah, nice! Yes, I have seen that header background problem! Fixing that would be amazing.

The legend is pretty hacky – a table seemed like a reasonable solution, but if you can do it in a nicer way that would be great :) Thanks!

[andylolz]

@codecleaner: A ProTip™ for testing these styles is to modify assets/templates/lesson.html to include:

<link rel="stylesheet" href="$root$/css/phantomjs.min.css">

…and…

<script type="text/javascript" src="$root$/js/pdf.js"></script>

If you do that, you don’t need to build PDFs every time you change something – you can just look at the generated HTML. At some point, I’ll add a --dev switch to build.py to make this a bit easier.

[codecleaner]

Thanks for that tip, it really helped me. I'm working on my branch, you can follow my changes here: https://github.com/codecleaner/lesson_format/tree/pdf-styling

[andylolz]

I haven’t tested, but reading it over it’s looking great so far! V glad to see you’ve switched the legend table for divs :smiley:

[codecleaner]

I was thinking about font that is used in british PDFs and I found interesting information here: http://comicneue.com/

Update 3 October 2014: A new version of Comic Neue including support for over 40 languages and improved metrics has been completed and will be released on this website on 24 December 2014. For updates follow @craigrozynski

[andylolz]

Ooooh! Very cool – let’s keep an eye on this :)

[andylolz]

This ticket is definitely closable now. Great job here, @codecleaner!

[codecleaner]

Information from http://comicneue.com:

This new version of Comic Neue (v2.2) includes support for over 40 languages and features improved metrics.

Maybe we can use it now to non-english PDFs?