🥚 Use 100pi for the page number

[philschatz]

To see the results:

./enki --command all-git-pdf --repo osbooks-calculus-bundle --book-slug calculus-volume-1 --ref main --style default

Before

After

Grrr, this line in the CSS file is causing the page number to not show up. If the prince-page-group line is commented then the page number shows up. But that probably causes other problems:

[data-type=chapter] {
    page: chapter;
    /* prince-page-group: start; */
}

[kswanson33]

the reason why this exists is so that styles applied with :first or :nth(1) can target the first page of a chapter. here is where this is used.

I'm going to try finding an alternative... :nth does seem like the best (maybe only) way of finding this page & applying these styles. I think we're using an old Prince syntax. Maybe updating will help, standby

[kswanson33]

after much digging, I have concluded that there is no way to simultaneously select the first page of each page group and get an accurate :nth() value for a numbering system that transcends these groups.

however, a custom @counter-style is an option. i'm convinced that customizing a counter style pi with symbols: 1 2 3 ... 313 100π 315 ... 627 100τ 629 would work.

[philschatz]

Thank you so much for digging into this!

Ah, so -prince-page-group resets the internal number so that :first can apply to the first page of each chapter. Drat.

And this @counter-style seems to have arrived just in time (2023 from the MDN link)!

So would something like this work since it seems from the example that the counter-style falls back to decimal when the symbols run out?

@counter-style decimal-with-pi {
    /* system: numeric; */
    symbols: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 100π;
}

[kswanson33]

i tried it out & guess counter-style is too new for prince (or our version of it) -- but it does have a similar thing symbols, so we could do something like this:

content: counter(page, symbols('1,', '2', '3', ... '313', '100pi'));

In sass, I hope that the symbols can be a valid variable value, so they can be reused.

or, for another approach

Prince also has its own user-defined counter styles which can use a javascript function.

1. Pass the JS to Prince: when invoking prince use the --javascript flag, which runs everything in the HTML <script> tag. Or pass it a file with --script=FILE
2. Write a JS function like:

const pi_counter = (n) => {
  if (n == 314) return "100pi";
  else if (n == 628) return "100tau";
  else return n;
}
Prince.addScriptFunc("pi_counter", pi_counter); // makes this accessible to prince in the CSS

3. Call from CSS:

content: prince-script(pi_counter, counter(page));

I tried this out and it works. I think it's a little neater than the long list of symbols. It does require more wiring things together from different places, though.

a third approach

Sass has its own way of accessing JS functions. We already use one here, and pass it to sass here. Instead of hard-coding the big symbols thing by hand, we could get JS to generate it (sass would still compile to the big thing).