How to extend a rectangle across a new page?

Questions
,
1

Hello everyone,

I’m working on a personal project where I’m building an index and positioning a rectangle along the edge of the page. Here’s the code I’ve written so far:

#let fullindex() = context{
  
  // page number and alignement based on oddity 
  let page_number = utils._page.get().first() 
  let page_alignment = utils.get_footer_alignemnt()
  
  set page(...) // a6 format
...
  // position of the rectangle based on alignment. Here "index" refer to rect along the page
  let position = utils.get_rectangle_position("index", page_alignment)
  place(constant.rectangle,dx : position.dx, dy : position.dy, page_alignment)

  ...
}

The issue arises when the index becomes too long and overflows onto a new page. In this case, I can’t figure out how to extend the rectangle to the new page and align it properly.

Here’s an example where rect should be on the right of the page

image
image680×863 105 KB

How can I ensure the rectangle continues on subsequent pages and remains aligned correctly?

For more insight you can check the project here (Warning it is quite big) :
https://typst.app/project/rKVgshBN8cbSlquzx4diaG

  • Relevant files are :
    • main.typ
    • format/index_format.typ

Thanks in advance for your help!

2

You can put the place() function in the page.background to get absolute positioning on the page. This is documented in the summary of the function place() here.

Moving the black rectangle to the left or right side of the page is then only a matter of grabbing the page number to check whether it is even or odd. You already did this in your code but I couldn’t see if this works since you only have one page in your example.

If you use the following set rule inside your function fullindex() you should get the correct placement of the black rectangle:

#set page(
  paper: "a6",
  margin: (inside: 20pt, outside: 30pt),
  background: context {
    let (page, ..) = counter(page).get()
    place(if calc.even(page) { right } else { left }, rect(width: 1em, fill: black, height: 100%))
  }
)

I also created a minimal example project to showcase the set rule here.

And a general note regarding your example project. Since you already included a warning about the size of the project, this could have been a hint for you to create a minimal example project that only reproduces your issue instead.

1 Like