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

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

Closed
iroychoudhury opened this issue May 29, 2019 · 5 comments · Fixed by #168
Closed

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

iroychoudhury opened this issue May 29, 2019 · 5 comments · Fixed by #168
Labels
enhancement New feature or request

Comments

@iroychoudhury
Copy link

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 yhatt added the enhancement New feature or request label May 29, 2019
@yhatt
Copy link
Member

yhatt commented May 29, 2019

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
Copy link
Author

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
Copy link
Member

yhatt commented May 30, 2019

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
Copy link
Author

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

@yhatt
Copy link
Member

yhatt commented Jun 3, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants