Commit 916804ce authored by julientaq's avatar julientaq
Browse files

new articles and fix some css for inline code

parent 8b4c47f7
......@@ -10,7 +10,7 @@ hide: true
## Master branch
3 march 2020
3 march 2020
| | |
|----------:|:--------------------|
......@@ -22,6 +22,16 @@ hide: true
## Releases
### 0.1.40
| | |
|----------:|:--------------------|
| The library | [paged.js](/releases/0-1-40/paged.js) |
| The polyfill | [paged.polyfill.js](/releases/0-1-40/paged.polyfill.js) |
| ESM | [paged.esm.js](/releases/0-1-40/paged.esm.js) |
| The library (legacy) | [paged.legacy.js](/releases/0-1-40/paged.legacy.js) |
| The polyfill (legacy) | [paged.legacy.polyfill.js](/releases/0-1-40/paged.legacy.polyfill.js) |
### 0.1.39
| | |
|----------:|:--------------------|
......
---
title: "Creating Templates: Atla"
toptitle: "Creating Templates"
title: "Finding letters for Atla"
date: 2020-03-08T16:53:38+01:00
draft: false
author: "Julien"
......
---
toptitle: "Creating Templates"
title: "Atla: humming the baseline"
date: 2020-03-19T09:39:10+01:00
draft: true
class:
intro: "Previously, we’ve seen how we chose the main typeface for Atla. Let’s keep going by looking at the template. Today, we’re looking at the baseline."
---
plan:
- baseline and metronome
- setting the right baseline
- baseline on the web
- baseline in Paged.js
- see you next time.
The first time i learned about the baseline grid, it wasn’t in front of a computer, clicking buttons,
It’s 2010, I’m in a print shop in Provence. One of those old places where your senses are lost between the smell of the ink and the sounds of those all Heidelberg machines. It’s my first time looking at how printing was done before we were surrounded by network and computers, and someone asks me if i want to print something.
Few years ago, i was in ~~London~~Derry, Ireland, where the stigmates of the bloody sundays was still in there. And there was that poem that this irish guy told me, and i always wanted to do something out of it. So i got the words in my memory and starting to think about what to do with it. It’s a not a long poem but it’s not a *haiku*. So i need to find some thing to do with it.
> “I could make drop caps!”
If you never tried to make a drop cap using the characters of lead in a print shop, let me tell you, it’s nothing like clicking a button or call some `.js` file. First, you need to know the exact size of your main font, and then, the difference with the size what you’ll be using for the drop cap. Easy maths.
And then, you’ll run all over the place to figure out where is that half millimeters piece of lead that you can use to make everything work.
That experience was my first encounter with the idea of a baseline.If the baseline is the invisible line where all characters sit, when you’re on an old printing machine, it’s tangible, because you just can’t print if your baseline is off.
Luckily, that was a long time ago.
## A baseline that sounds great
If a book is a song, a baseline is a metronome. It clicks on every beat, helping all the musicians to be right in time so they can play together. That means that you can be off beat for a while when you want to play *solo*, but you always have something to look for when you want to join the band again.
The pieces we’re using when we’re making a book are the musicians: images, titles, figures, tables, etc., they all need to have their moments when they can shine solo, but they always need to come back to play with the band.
The first musician to be recorded in our layout is the one with the more regularity, who will give the tempo to everyone. We’re not talking about beat per minutes, but about line per page. How much line do we want per page is gonna give us the kick beat of the book.
## The stage
Before we start kicking the drum, let’s look at the stage.
Here is our page, <span class="measures">6 × 9 inches</span>. I set up the margins to have enough place for each thumb by having <span class="measures">.75in</span><span class="mm">20mm</span> for the outer margins.
With a font-size of 12px (around 10pt), this give us around 90 characters per line. It may look like a big number, but the target readers are mostly scholars and librarians, they’re used to long lines and complex text. Still, we don’t want the page to feel too crowded, so i added more leading and white space, making it 18px.
> By the way, if you’re used to listen to book designer, they never talk in pixel, but mostly in point. This is not possible using paged.js for one simple reason. As a screen is made of pixel, there is no such thing as a half pixel, which has only one way out: numbers are rounded: 1.4px is either turned into 1px or 2px, depending on the browser, or the OS, etc. Thus, using point to define a distance or a size will most likely shift one line of text somewhere from one pixel. So, when you’re working on screen, you see that line that doesn’t sit on its baseline, and it makes things really hard for a book designer. Therefore, let’s go with px, no one will be hurt, the book will be fine :)
It’s a big number so i needed to have a bigger line-height that i would usually have,
---
title: "Pagedjs 0.1.40"
date: 2020-04-01T18:16:44+01:00
draft: true
author: "Julien"
class:
intro: "This week, paged.js turns 0.1.40. Happy new release day! Here come a couple of fixes and some new features"
---
## New release!
The 0.1.40 is now available to download from [unpkg](https://unpkg.com) or [npm](https://www.npmjs.com/package/pagedjs) (and our [release page](/documentation/releases).
In this release:
- @julientaq added support for the `position: fixed` property: if one of your element is set as `fixed`, it will be repeated on all pages without having to struggle with `margin-boxes`, `position: running` or `string-set`. Be aware that the origin will always be the page, thus you’ll need to set up negative margins to your element to bring it in the bleeds.
- Antonio Norman (@antman3351) [found a bug and its fix](https://gitlab.pagedmedia.org/tools/pagedjs/issues/180), when you had multiple `string` elements on the same page.
- Support for period in `id` attribute: `.` is for `class` and `#` is for `id`. But the specs allow you to use a `.` in an `id`!
Paged.js can now handle `<p id="#this.paragraph">` without crashing.
- @Stouffi fixed a couple of bugs in the chunker, and documented those quite well.
- Fred Chasen (@fchasen) update the Jest infrastructure so tests are now running fine.
- Guillaume (@mogztter) wanted to be sure that we’d all follow the best practices without having to spend hours checking our spaces/tabs issues, so he set up eslint, put is hands in 58 files, cleaned all the tabulation issues we had in the code and updated.
Thanks to all of those who contributed :)
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -61,10 +61,10 @@ article {
border: 0;
line-height: 1;
color: var(--color-body);
background-color: linear-gradient(transparent 0, transparent 78%, var(--color-link) 78%, var(--color-link) 82%, transparent 82%, transparent 100%);
background: linear-gradient(transparent 0, transparent 78%, var(--color-link) 78%, var(--color-link) 82%, transparent 82%, transparent 100%);
font-style: italic;
transition: background .5s;
/* transition: background .5s; */
&:hover {
--color-link: var(--color-lightest-grey);
......@@ -210,8 +210,6 @@ article {
border: 1px solid lightgrey;
white-space: pre-wrap;
margin: 0;
/* background: hsl(0, 2%, 90%); */
/* overflow: auto; */
& + pre {
}
}
......@@ -220,9 +218,10 @@ article {
font-size: .70em;
font-family: var(--font-mono);
line-height: 1.2em;
background: #eed;
/* background: #eee; */
margin: 0 0.3ch;
line-height: 1;
border-bottom: 4px solid #eee;
}
pre code {
......@@ -367,20 +366,21 @@ header {
margin-top: 6em;
/* font-weight: 700; */
&::before {
content: var(--symbol-content);
/* transform: rotate(45deg); */
/* border: 4px solid #eee; */
/* content: var(--symbol-content);
z-index: -1;
/* width: 10em; */
/* height: 10em; */
font-size: 20em;
top: -0.5em;
left: -0.3em;
color: var(--color-lightest-grey);
color: red;
display: block;
position: absolute;
position: absolute; */
}
.top-title {
color: grey;
display: block;
font-size: 0.5em;
margin-top: -1em;
}
#title {
margin-top: 0;
margin-bottom: 0;
......@@ -392,9 +392,24 @@ header {
margin-top: .3em;
font-family: var(--font-serif);
position: relative;
/* text-shadow: 1px 1px var(--color-paper), -1px 1px var(--color-paper), -1px -1px var(--color-paper), 1px -1px var(--color-paper), 2px 2px var(--color-paper), -2px 2px var(--color-paper), -2px -2px var(--color-paper), 2px -2px var(--color-paper), 3px 3px var(--color-paper), -3px 3px var(--color-paper), -3px -3px var(--color-paper), 3px -3px var(--color-paper), 4px 4px var(--color-paper), -4px 4px var(--color-paper), -4px -4px var(--color-paper), 4px -4px var(--color-paper); */
/* filter: drop-shadow(-2px 0px 0px var(--color-paper)) drop-shadow(0px 2px 0px var(--color-paper)) drop-shadow(-2px -2px 0px var(--color-paper)) drop-shadow(2px 2px 0px var(--color-paper)) ; */
border: 0px solid transparent;
&::before {
content: var(--symbol-content);
/* transform: rotate(45deg); */
/* border: 4px solid #eee; */
z-index: -1;
/* width: 10em; */
/* height: 10em; */
opacity: 0.6;
font-size: 5em;
top: -0.44em;
left: -0.3em;
font-style: normal;
color: var(--color-grey);
display: block;
position: absolute;
}
}
.meta {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment