Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make transparent covering actually transparent #17

Open
andreasKroepelin opened this issue Apr 13, 2023 · 6 comments · May be fixed by #91
Open

Make transparent covering actually transparent #17

andreasKroepelin opened this issue Apr 13, 2023 · 6 comments · May be fixed by #91
Labels
help wanted Extra attention is needed

Comments

@andreasKroepelin
Copy link
Owner

Currently, when you cover someting transparently, it is actually just displayed normally but the text color is set to a light grey. This obviously doesn't work for any content that sets its own text colors (including syntax highlighted code), images, visualisations etc.

How can we force arbitrary content to appear transparent? Does the implementation of this feature in beamer help in any way?

@andreasKroepelin andreasKroepelin added the help wanted Extra attention is needed label Apr 13, 2023
@ntjess
Copy link
Contributor

ntjess commented Jul 23, 2023

https://typst.app/project/rFCuxUqv8SMpdQebr3Yb0m seems to be a good start. This handles shapes, images, colored text, bulleted lists, dynamic font, and allows specifying a custom outset if the default of 0.25em doesn't work in a specific scenario. Of course, it will fully obscure text until typst/typst#79 is fixed

#let cover-with-rect(body, outset: 0.25em, alpha: 70%) = {
  layout(layout-size => {
    style(styles => {
      let body-size = measure(body, styles)
      let bounding-width = calc.min(body-size.width, layout-size.width)
      let wrapped-body-size = measure(box(body, width: bounding-width), styles)
      stack(
        spacing: -wrapped-body-size.height,
        box(body),
        rect(
          fill: rgb(100%, 100%, 100%, alpha),
          width: wrapped-body-size.width,
          height: wrapped-body-size.height,
          outset: outset,
        )
      )
    })
  })
}

image

@ntjess
Copy link
Contributor

ntjess commented Jul 23, 2023

Downside: Fails when background color is different:

image

I will see if there are any good options to infer background color during placement

@andreasKroepelin
Copy link
Owner Author

Interesting approach! But yeah as you said, doesn't help much until transparency works in the PDF export.

@ntjess
Copy link
Contributor

ntjess commented Jul 25, 2023

Spent some more time on this. Since there are so many edge cases, I thought of a solution that lets the user provide their own "hider" mechanism. As a bonus, it means if you want to use a different uncover mode everywhere, you only have to specify it once.

#let hider = state("hider", hide)

#let cover-with-style(text-color) = body => {
  text(text-color, body)
}
#let make-text-light-gray = cover-with-style(gray)
#let make-text-dark-gray = cover-with-style(gray.darken(50%))
#let light-mask = cover-with-rect()
#let dark-mask = cover-with-rect(fill: "#0009")

#let update-hider(hide-function) = {
  let wrapper(_) = {
    return hide-function
  }
  hider.update(wrapper)
}

#let _slides-cover(mode, body) = {
    if mode == "invisible" {
        hide(body)
    } else if mode == "transparent" {
        text(gray.lighten(50%), body)
    } else if mode == "hider" {
      locate(loc => {
        hider.at(loc)(body)
      })
    }
    else {
        panic("Illegal cover mode: " + mode)
    }
}

If this is favorable, I advocate to make "hider" the default mode instead of transparent, where it is initialized with "hide" for backwards compatibility.

Sample usage that works on a black background:

logic.update-hider(logic.make-text-dark-gray)

#logic.polylux-slide[
  Hello #uncover(2)[World]
]

image

@andreasKroepelin
Copy link
Owner Author

So this is essentially a way to specify a default cover mode, right? Not a bad idea, I think we also had it that way some time ago (can't remember why I changed it). But it doesn't solve the functional problem of transparency.

@andreasKroepelin
Copy link
Owner Author

For reference:
typst/typst#1844 (review)

ntjess added a commit to ntjess/polylux that referenced this issue Aug 29, 2023
@ntjess ntjess mentioned this issue Aug 29, 2023
ntjess added a commit to ntjess/polylux that referenced this issue Aug 29, 2023
@ntjess ntjess linked a pull request Aug 29, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants