marp-team / marpit

The skinny framework for creating slide deck from Markdown
https://marpit.marp.app/
MIT License
948 stars 45 forks source link

Add percentage of 'right' or 'left' to bg image directive #166

Closed iroychoudhury closed 5 years ago

iroychoudhury commented 5 years ago

Hello @yhatt, what is your opinion about adding a percentage to the [bg left]/[bg right] directive? Currently, these split the slide at 50%, but if say we did [bg left w:33%], this would mean that the bg image spans one-third of the slide and the text takes up the remaining two-thirds. Will it be possible to add this by any chance?

PS: Thank you so much for making Marp happen!

yhatt commented 5 years ago

Sounds good. Exactly my slide had tried the same thing by using inline style, but definition by percentage is much simpler and easy to use.

![bg left w:33%] already has meaning to change image size for background. So it would be ![bg left:33%] if split slide could specify percentage.

<!-- Default (50%) -->
![bg left](https://example.com/example.jpg)

---

<!-- One-third (33%) -->
![bg left:33%](https://example.com/example.jpg)
iroychoudhury commented 5 years ago

Thank you. Please, could you point me to the documentation for inline styling? I am having trouble figuring out how to do this with inline styling and also to fix the position of the h1 headers. Thanks again.

yhatt commented 5 years ago

There is an extension of documents for theme CSS. https://marpit.marp.app/theme-css?id=tweak-style-through-markdown

The following is very ugly workaround...

![bg](https://via.placeholder.com/150)
![bg](about:blank)
![bg](about:blank)

<style scoped>
section {
  padding-left: calc(33% + 80px);
}
</style>

# Ugly workaround for one-third bg on the left
iroychoudhury commented 5 years ago

Thank you! I agree - this is not the best workaround :) But it's usable nonetheless :) Thank you again for all your work!

yhatt commented 5 years ago

Added size argument in #168. We are going to ship v1.1.0 shortly, and Marp tools would update to use the released version.