* org-reveal: content side by side
@ 2018-02-04 10:59 Michael Welle
2018-02-04 18:46 ` Michael Welle
2018-02-11 15:29 ` Michael Welle
0 siblings, 2 replies; 11+ messages in thread
From: Michael Welle @ 2018-02-04 10:59 UTC (permalink / raw)
To: emacs-orgmode
Hello,
a new year, a new tool ;). I try to shift a bit away from beamer based
slides to a format, that allows me to create nice html-based slides and
nice pdf-based slides from the same source. It looks like org-reveal and
decktape might be what I want. Maybe. To find out I try to convert an
org-beamer based set of slides.
With the second slide first problems... revealed ;). How can I position
content, let's say images or images and text, side by side? Using
org-beamer I would do something like that:
#+BEGIN_CENTER
#+ATTR_HTML: :width 25% :center
[[./img/1290250232.pdf]]
#+ATTR_HTML: :width 25% :center
[[./img/Machovka-chip.pdf]]
#+ATTR_HTML: :width 30% :center
[[./img/SAN-Disk-Array-SCSI-29.07.11.pdf]]
#+END_CENTER
That gives me three scaled images in a row (s. [0]).
That doesn't work with org-reveal. Putting the content into a table
works, kind of. But I don't know how to add the attributes used for
scaling, styles etc. And it will get complicated if I want to compose
the slide out of three or more blocks, e.g. something like that:
aaa bbb
aaa bbb
ccccccc
ccccccc
Any hints on that? I guess the question boils down
to how to produce a slide like the one in [0] with org-reveal.
Regards
hmw
[0] https://www.c0t0d0s0.de/tmp/vm1.png
^ permalink raw reply [flat|nested] 11+ messages in thread
* Re: org-reveal: content side by side
2018-02-04 10:59 org-reveal: content side by side Michael Welle
@ 2018-02-04 18:46 ` Michael Welle
2018-02-06 0:37 ` Matt Price
2018-02-11 15:29 ` Michael Welle
1 sibling, 1 reply; 11+ messages in thread
From: Michael Welle @ 2018-02-04 18:46 UTC (permalink / raw)
To: emacs-orgmode
Hello,
took me the better part of the afternoon, but I came up with the
following approach:
* Was ist Virtualisierung?
- Aus der Wikipedia:
#+BEGIN_QUOTE
Virtualisierung bezeichnet in der Informatik die Nachbildung eines
Hard- oder Software-Objekts durch ein ähnliches Objekt vom selben Typ
mit Hilfe eines Abstraktions-Layers.
#+END_QUOTE
#+REVEAL_HTML: <div style="display:flex;align-items:center;margin:auto;width:60%;">
#+REVEAL_HTML: <div style="width:30%">
[[./img/1290250232.svg]]
#+REVEAL_HTML: </div>
#+REVEAL_HTML: <div style="width:30%">
[[./img/Machovka-chip.svg]]
#+REVEAL_HTML: </div>
#+REVEAL_HTML: <div style="width:30%">
[[./img/SAN-Disk-Array-SCSI-29.07.11.svg]]
#+REVEAL_HTML: </div>
#+REVEAL_HTML: </div>
That resembles the slide from [0] to a certain degree. The three images
are centered, vertically and horizontally, even if they are of different
sizes. I'm not sure though how good the support for display:flex is,
esp. when it comes to mobile devices. And, for my taste at least, that
approach needs too much knowledge about style sheets. Still looking for
a nicer solution ;).
Regards
hmw
[0] https://www.c0t0d0s0.de/tmp/vm1.png
^ permalink raw reply [flat|nested] 11+ messages in thread
* Re: org-reveal: content side by side
2018-02-04 18:46 ` Michael Welle
@ 2018-02-06 0:37 ` Matt Price
2018-02-07 17:42 ` Michael Welle
0 siblings, 1 reply; 11+ messages in thread
From: Matt Price @ 2018-02-06 0:37 UTC (permalink / raw)
To: Michael Welle, Org Mode
[-- Attachment #1: Type: text/plain, Size: 1753 bytes --]
for this issue, I define a class "paired" in my local cass file (or
actually, I now use a very modestly edited custom theme) :
.paired {
float:left !important;
max-width:47% !important;
}
and then in the org file:
:#+ATTR_HTML: :class paired
That works OK for me. the "!important" is necessary because reveal css is
prtty greedy & hard to override.
On Sun, Feb 4, 2018 at 1:46 PM, Michael Welle <mwe012008@gmx.net> wrote:
> Hello,
>
> took me the better part of the afternoon, but I came up with the
> following approach:
>
>
>
> * Was ist Virtualisierung?
> - Aus der Wikipedia:
> #+BEGIN_QUOTE
> Virtualisierung bezeichnet in der Informatik die Nachbildung eines
> Hard- oder Software-Objekts durch ein ähnliches Objekt vom selben Typ
> mit Hilfe eines Abstraktions-Layers.
> #+END_QUOTE
>
>
> #+REVEAL_HTML: <div style="display:flex;align-items:center;margin:auto;
> width:60%;">
>
> #+REVEAL_HTML: <div style="width:30%">
> [[./img/1290250232.svg]]
> #+REVEAL_HTML: </div>
>
> #+REVEAL_HTML: <div style="width:30%">
> [[./img/Machovka-chip.svg]]
> #+REVEAL_HTML: </div>
>
> #+REVEAL_HTML: <div style="width:30%">
> [[./img/SAN-Disk-Array-SCSI-29.07.11.svg]]
> #+REVEAL_HTML: </div>
>
> #+REVEAL_HTML: </div>
>
>
> That resembles the slide from [0] to a certain degree. The three images
> are centered, vertically and horizontally, even if they are of different
> sizes. I'm not sure though how good the support for display:flex is,
> esp. when it comes to mobile devices. And, for my taste at least, that
> approach needs too much knowledge about style sheets. Still looking for
> a nicer solution ;).
>
> Regards
> hmw
>
> [0] https://www.c0t0d0s0.de/tmp/vm1.png
>
>
[-- Attachment #2: Type: text/html, Size: 2528 bytes --]
^ permalink raw reply [flat|nested] 11+ messages in thread
* Re: org-reveal: content side by side
2018-02-06 0:37 ` Matt Price
@ 2018-02-07 17:42 ` Michael Welle
0 siblings, 0 replies; 11+ messages in thread
From: Michael Welle @ 2018-02-07 17:42 UTC (permalink / raw)
To: emacs-orgmode
Hello,
Matt Price <moptop99@gmail.com> writes:
> for this issue, I define a class "paired" in my local cass file (or
> actually, I now use a very modestly edited custom theme) :
>
>
> .paired {
> float:left !important;
> max-width:47% !important;
>
> }
>
> and then in the org file:
> :#+ATTR_HTML: :class paired
>
> That works OK for me. the "!important" is necessary because reveal css is
> prtty greedy & hard to override.
thanks, I will check it out. I have to say it takes quite some time to
get a presentation that looks as good as the beamer based presentation I
use as an example.
The current issue I have is this. I have a structure like this:
* foo
** foo1
** foo2
Basically foo acts as a container for the content. I want foo to appear
in the table of contents and I want two slides, foo1 and foo2, and none
for foo. I'm nearly there, but I don't know how to suppress the
generation of a slide for foo.
I could use this structure:
* foo1
* foo2
But I miss the container that groups the content for me, the presenter.
And what is more important, I don't know how to get foo into the TOC (in
a nice way).
Or I could use:
* foo1
** foo2
Which seems to have even more issues: the content of foo2 is on the same
level as the content of foo1, it's not sub-content. The headers of the
slides have different sizes then, etc.
Regards
hmw
^ permalink raw reply [flat|nested] 11+ messages in thread
* Re: org-reveal: content side by side
2018-02-04 10:59 org-reveal: content side by side Michael Welle
2018-02-04 18:46 ` Michael Welle
@ 2018-02-11 15:29 ` Michael Welle
2018-02-13 11:19 ` Eric S Fraga
2018-02-13 12:33 ` Jens Lechtenboerger
1 sibling, 2 replies; 11+ messages in thread
From: Michael Welle @ 2018-02-11 15:29 UTC (permalink / raw)
To: emacs-orgmode
Hello,
I just wanted to tell you how my adventure in reveal land ended ;).
Well, I spent a couple of hours last week and the better part of this
weekend with css. I could produce a slide similar to [0]. I couldn't
solve the structure problem I described earlier. And what put me off
in the end is, that I wasn't able to produce a slide like the one in [1].
Looks easy, eh? A header at the top, a footer at the bottom and a lot
of space in between. In some cases, like in [1], I wanted content (e.g.
<p>Ich...<br/>OS/2 Warp 4</p>) to be centered horizontally and
vertically between the footer and the header.
Maybe it's my lack of understanding of css (I set colored borders for
every element and used the browser's web inspector tool to figure out
what happened.), maybe the css must be rewritten using flex layout, I
don't know. Until I will get bored again, I will stick with Org's beamer
export :)[2]. But anyways, if you want to share your experience with
ox-reveal, you are welcome.
Regards
hmw
[0] https://www.c0t0d0s0.de/tmp/vm1.png
[1] https://www.c0t0d0s0.de/tmp/vm2.png
[2] One last trick I want to try: Instead of switching reveal-center off
and marking the content that should be centered, I could go the
other way around: switching reveal-center on and trying to nail
content like the header at the top of the slide.
^ permalink raw reply [flat|nested] 11+ messages in thread
* Re: org-reveal: content side by side
2018-02-11 15:29 ` Michael Welle
@ 2018-02-13 11:19 ` Eric S Fraga
2018-02-13 11:43 ` Michael Welle
2018-02-13 12:33 ` Jens Lechtenboerger
1 sibling, 1 reply; 11+ messages in thread
From: Eric S Fraga @ 2018-02-13 11:19 UTC (permalink / raw)
To: Michael Welle; +Cc: emacs-orgmode
[-- Attachment #1: Type: text/plain, Size: 804 bytes --]
On Sunday, 11 Feb 2018 at 16:29, Michael Welle wrote:
[...]
> Until I will get bored again, I will stick with Org's beamer export
> :)[2]. But anyways, if you want to share your experience with
> ox-reveal, you are welcome.
Every now and again, I also get bored and explore alternatives to beamer
with org for presentations. Reveal is the one that has come the closest
to working for me but I still end up back with beamer. One of the
issues I had with reveal last time I played with it was that my
presentations looked different depending on which browser and/or display
I used. There was too much uncertainty in what I would actually get.
But reveal and similar approaches are appealing for their simplicity.
--
Eric S Fraga via Emacs 27.0.50, Org release_9.1.6-118-g134243
[-- Attachment #2: signature.asc --]
[-- Type: application/pgp-signature, Size: 194 bytes --]
^ permalink raw reply [flat|nested] 11+ messages in thread
* Re: org-reveal: content side by side
2018-02-13 11:19 ` Eric S Fraga
@ 2018-02-13 11:43 ` Michael Welle
0 siblings, 0 replies; 11+ messages in thread
From: Michael Welle @ 2018-02-13 11:43 UTC (permalink / raw)
To: emacs-orgmode
Hello Eric,
Eric S Fraga <esflists@gmail.com> writes:
> On Sunday, 11 Feb 2018 at 16:29, Michael Welle wrote:
>
> [...]
>
>> Until I will get bored again, I will stick with Org's beamer export
>> :)[2]. But anyways, if you want to share your experience with
>> ox-reveal, you are welcome.
>
> Every now and again, I also get bored and explore alternatives to beamer
> with org for presentations.
I'm glad I'm not the only one with that 'flaw' ;).
> Reveal is the one that has come the closest
> to working for me but I still end up back with beamer.
Don't get me wrong, reveal is fine. It's just that I can't (within an
appropriate amount of time) produce a slide with the layout I
want (header at the top, footer at the bottom, content centered).
> One of the
> issues I had with reveal last time I played with it was that my
> presentations looked different depending on which browser and/or display
> I used. There was too much uncertainty in what I would actually get.
>
> But reveal and similar approaches are appealing for their simplicity.
I guess that's the downside of using html. Every render engine has a
certain amount of degrees of freedom on how they can render a html
construct. To tackle that problem my idea was, as a first step, to
produce slides based on reveal.js. That way I can use features, that
might be handy when it comes to teaching stuff. And maybe (I don't have
numbers etc., so I can be totally wrong) it is more likely to have a
more or less decent web browser at hand than a pdf viewer, esp. when it
comes to mobile devices.
As a second step, I wanted to use decktape to generate a pdf file from
the html based slides. That gives me a format with a more reproducible
layout (assuming that the render engine in decktape generates the same
output for subsequent runs).
Regards
hmw
PS: I opened a bug report for org-reveal, asking for an approach to
tackel to my issue. Maybe someone is so kind and points me in the
right direction ;).
^ permalink raw reply [flat|nested] 11+ messages in thread
* Re: org-reveal: content side by side
2018-02-11 15:29 ` Michael Welle
2018-02-13 11:19 ` Eric S Fraga
@ 2018-02-13 12:33 ` Jens Lechtenboerger
2018-02-13 15:16 ` Michael Welle
1 sibling, 1 reply; 11+ messages in thread
From: Jens Lechtenboerger @ 2018-02-13 12:33 UTC (permalink / raw)
To: Michael Welle; +Cc: emacs-orgmode
On 2018-02-11, Michael Welle wrote:
> Looks easy, eh? A header at the top, a footer at the bottom and a lot
> of space in between. In some cases, like in [1], I wanted content (e.g.
> <p>Ich...<br/>OS/2 Warp 4</p>) to be centered horizontally and
> vertically between the footer and the header.
I created emacs-reveal [0] for my own slides. Contents are centered
vertically (default for reveal.js). CSS with “text-align: center”
can be used for horizontal alignment.
The howto for emacs-reveal is available at [1]. First-level
headings are centered vertically and horizontally. I just added
slide 20 with horizontally centered text (underneath a heading,
which—as ugly hack—could just be a non-breaking space I guess).
I hope that helps and would be happy to help more. (Responses may
be slow in the coming days, though.)
Best wishes
Jens
[0] https://gitlab.com/oer/emacs-reveal
[1] https://oer.gitlab.io/emacs-reveal-howto/howto.html
^ permalink raw reply [flat|nested] 11+ messages in thread
* Re: org-reveal: content side by side
2018-02-13 12:33 ` Jens Lechtenboerger
@ 2018-02-13 15:16 ` Michael Welle
2018-02-13 16:16 ` Jens Lechtenboerger
2018-02-13 16:21 ` Michael Welle
0 siblings, 2 replies; 11+ messages in thread
From: Michael Welle @ 2018-02-13 15:16 UTC (permalink / raw)
To: emacs-orgmode
Hello Jens,
Jens Lechtenboerger <lechten@wi.uni-muenster.de> writes:
> On 2018-02-11, Michael Welle wrote:
>
>> Looks easy, eh? A header at the top, a footer at the bottom and a lot
>> of space in between. In some cases, like in [1], I wanted content (e.g.
>> <p>Ich...<br/>OS/2 Warp 4</p>) to be centered horizontally and
>> vertically between the footer and the header.
>
> I created emacs-reveal [0] for my own slides. Contents are centered
jepp, I had a gander at that slides as well as at your slides for the OS
course. Great stuff.
> vertically (default for reveal.js). CSS with “text-align: center”
> can be used for horizontal alignment.
>
> The howto for emacs-reveal is available at [1]. First-level
> headings are centered vertically and horizontally. I just added
> slide 20 with horizontally centered text (underneath a heading,
> which—as ugly hack—could just be a non-breaking space I guess).
Well, maybe it's just me, but the headings do not look vertically
centered. They jump up and down a lot while flipping through the slides.
For slides with a lot of content the heading is a bit more to the top of
the page, for slides with less content the heading 'sinks down' to the
center of the page. If you look at page 20 the heading is just above the
vertical middle of the slide, not at the top.
That jumping of the headings is one of my main issues, I think it's not
acceptable.
I can glue the headings to the top of the page (setting reveal-center to
nil). But then I have trouble centering the content. I tried with
putting in an empty <div> of a certain height. That works, for certain
meanings of work. The trouble is finding the height, which also might
change with changing resolution and content.
I have the feeling that all that can be fixed with using flex layout.
That means changing the CSS entirely, I think. But that is a lot of
work. On the other hand, I'm not a CSS expert.
> I hope that helps and would be happy to help more. (Responses may
> be slow in the coming days, though.)
No worries. Your help is much appreciated.
Regards
hmw
^ permalink raw reply [flat|nested] 11+ messages in thread
* Re: org-reveal: content side by side
2018-02-13 15:16 ` Michael Welle
@ 2018-02-13 16:16 ` Jens Lechtenboerger
2018-02-13 16:21 ` Michael Welle
1 sibling, 0 replies; 11+ messages in thread
From: Jens Lechtenboerger @ 2018-02-13 16:16 UTC (permalink / raw)
To: Michael Welle; +Cc: emacs-orgmode
On 2018-02-13, Michael Welle wrote:
> That jumping of the headings is one of my main issues, I think it's not
> acceptable.
I see. I don’t know how to fix the headings at the top and have the
contents vertically centered.
Best wishes
Jens
^ permalink raw reply [flat|nested] 11+ messages in thread
* Re: org-reveal: content side by side
2018-02-13 15:16 ` Michael Welle
2018-02-13 16:16 ` Jens Lechtenboerger
@ 2018-02-13 16:21 ` Michael Welle
1 sibling, 0 replies; 11+ messages in thread
From: Michael Welle @ 2018-02-13 16:21 UTC (permalink / raw)
To: emacs-orgmode
Hello,
i have to correct me.
Michael Welle <mwe012008@gmx.net> writes:
> Hello Jens,
>
> Jens Lechtenboerger <lechten@wi.uni-muenster.de> writes:
[...]
>> The howto for emacs-reveal is available at [1]. First-level
>> headings are centered vertically and horizontally. I just added
>> slide 20 with horizontally centered text (underneath a heading,
>> which—as ugly hack—could just be a non-breaking space I guess).
> Well, maybe it's just me, but the headings do not look vertically
> centered. They jump up and down a lot while flipping through the
> slides.
the headings are vertically centered, of course, they jump up and down.
That's what I don't want.
Regards
hmw
^ permalink raw reply [flat|nested] 11+ messages in thread
end of thread, other threads:[~2018-02-13 16:21 UTC | newest]
Thread overview: 11+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2018-02-04 10:59 org-reveal: content side by side Michael Welle
2018-02-04 18:46 ` Michael Welle
2018-02-06 0:37 ` Matt Price
2018-02-07 17:42 ` Michael Welle
2018-02-11 15:29 ` Michael Welle
2018-02-13 11:19 ` Eric S Fraga
2018-02-13 11:43 ` Michael Welle
2018-02-13 12:33 ` Jens Lechtenboerger
2018-02-13 15:16 ` Michael Welle
2018-02-13 16:16 ` Jens Lechtenboerger
2018-02-13 16:21 ` Michael Welle
Code repositories for project(s) associated with this public inbox
https://git.savannah.gnu.org/cgit/emacs/org-mode.git
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).