DZslides and Pictures with captions

DZslides and Pictures with captions

[Joseph Reagle]

 > An image occurring by itself in a paragraph will be rendered as a 
figure with a caption.... in HTML, the image will be placed in a div 
with class figure, together with a caption in a p with class caption.) 
The image’s alt text will be used as the caption.

DZSlides now supports fullscreen presentation of a figure with 
figurecaption, so that might be a better way to render it.

Right now, I hack this such that an image preceded by a h4 becomes 
fullscreen (with h4 as the caption) such that this markdown:

---

#### Specialization

<a title="By cloudzilla (Flickr) [CC-BY-2.0 
(www.creativecommons.org/licenses/by/2.0)], via Wikimedia Commons" 
href="http://commons.wikimedia.org/wiki/File%3AFatty_watching_himself_on_TV.jpg"><img 
width="512" alt="Fatty watching himself on TV" 
src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Fatty_watching_himself_on_TV.jpg/512px-Fatty_watching_himself_on_TV.jpg"/></a>

is presented with this css

h4 { /*used for full image captions*/
     top: 100px;
     position: relative;
     margin-left: auto;
     margin-right: auto;
     width: 100%;
     font-size: 200%;
     z-index: 1;
     color: white; text-shadow: black 0.1em 0.1em 0.2em;
     text-align: center;
}

h4 + a>img{
     position:relative;
     left:0px;
     top:-150px; /* offset h1.title margin */
     display:block;
     padding: 0px;
     margin-left: auto;
     margin-right: auto;
}

becomes this slide.

http://reagle.org/joseph/2012/mcs/talks/200-sunstein.html#7.0

(Though honestly, I'm surprised that selector "h4 + a>img" works...)

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to pandoc-discuss+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/pandoc-discuss?hl=en.

Re: DZslides and Pictures with captions

[John MacFarlane]

+++ Joseph Reagle [Mar 28 12 18:26 ]:
> 
> > An image occurring by itself in a paragraph will be rendered as a
> figure with a caption.... in HTML, the image will be placed in a div
> with class figure, together with a caption in a p with class
> caption.) The image’s alt text will be used as the caption.
> 
> DZSlides now supports fullscreen presentation of a figure with
> figurecaption, so that might be a better way to render it.

Actually, pandoc does use figure and figurecaption for html5 and
dzslides.  But I think I removed the CSS that makes figures appear
fullscreen, to provide more flexibility -- since people might want
to have other things on a slide than just a figure...

> Right now, I hack this such that an image preceded by a h4 becomes
> fullscreen (with h4 as the caption) such that this markdown:
> 
> ---
> 
> #### Specialization
> 
> <a title="By cloudzilla (Flickr) [CC-BY-2.0
> (www.creativecommons.org/licenses/by/2.0)], via Wikimedia Commons" href="http://commons.wikimedia.org/wiki/File%3AFatty_watching_himself_on_TV.jpg"><img
> width="512" alt="Fatty watching himself on TV" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Fatty_watching_himself_on_TV.jpg/512px-Fatty_watching_himself_on_TV.jpg"/></a>
> 
> is presented with this css
> 
> h4 { /*used for full image captions*/
>     top: 100px;
>     position: relative;
>     margin-left: auto;
>     margin-right: auto;
>     width: 100%;
>     font-size: 200%;
>     z-index: 1;
>     color: white; text-shadow: black 0.1em 0.1em 0.2em;
>     text-align: center;
> }
> 
> h4 + a>img{
>     position:relative;
>     left:0px;
>     top:-150px; /* offset h1.title margin */
>     display:block;
>     padding: 0px;
>     margin-left: auto;
>     margin-right: auto;
> }
> 
> becomes this slide.
> 
> http://reagle.org/joseph/2012/mcs/talks/200-sunstein.html#7.0
> 
> (Though honestly, I'm surprised that selector "h4 + a>img" works...)
> 
> -- 
> You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
> To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To unsubscribe from this group, send email to pandoc-discuss+unsubscribe@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/pandoc-discuss?hl=en.
> 

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to pandoc-discuss+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/pandoc-discuss?hl=en.