nature-of-code / noc-book-2

The 2024 edition of The Nature of Code with p5.js. Includes Notion workflow and build system.
https://natureofcode.com
1.16k stars 82 forks source link

keep two <ol> elements together (chapter 11) #837

Closed shiffman closed 1 month ago

shiffman commented 8 months ago

@jasongao97 I was going to wrap 4 and 5 below in an avoid-break to have them together on the next page, but it resets the numbers. I guess I could use our override the numbering? This is low priority but nice to fix if you have an idea.

Screen Shot 2024-02-24 at 9 26 37 PM

shiffman commented 8 months ago

I just tried something like this for a part of chapter 10, i'm probably taking this too far but will see if it works.

Screen Shot 2024-02-24 at 9 49 59 PM
shiffman commented 8 months ago

and now i've done it here as well in chapter 10:

Screen Shot 2024-02-24 at 10 01 23 PM

And the original spot in chapter 11:

Screen Shot 2024-02-24 at 10 00 34 PM
jasongao97 commented 8 months ago

Sure! Do you mean to prevent a single list item to be placed alone at the top or bottom of a page? And also from break inside? Maybe we could do something like this:

ol,
ul {
  ...

  li {
    break-inside: avoid;
  }

  li:first-child {
    break-after: avoid;
  }

  li:last-child {
    break-before: avoid;
  }
}
shiffman commented 8 months ago

Yes, this could work! Essentially I want to optionally set any of the following:

It's actually working the way I implemented it but feel free to change it to something better if you like!

shiffman commented 8 months ago

It would be nice to have better rules to define how this should work to avoid "orphans" essentially but let's just leave my manual "hack" in for now since it will make the PDF render correctly!

shiffman commented 1 month ago

I'm going to close this issue now as the project is wrapping up. I'll tag in @alanvww who I know is working on a related project for ITP thesis, this is relevant to the kinds of issues we discussed in our recent meeting!