Skip to content

Web images from beamer slides include the whole slide (sort of) #282

Description

@prowlett

I can't remember when it started, but for a while now chirun has been including the whole slide when converting images in beamer into images on the web.

For example, this code

\documentclass{beamer}
\setbeamercolor{background canvas}{bg=yellow}
\usepackage{tikz}
\begin{document}
    \begin{frame}
        \begin{tikzpicture}
            \draw[fill=violet] (0,0) rectangle (1,1);
        \end{tikzpicture}
    \end{frame}
\end{document}

makes a slide that looks like this:

purple square on a yellow slide

I would expect the web version to be just a purple square with no yellow, but it does this.

webpage showing purple square in a big yellow rectangle

(It does the same even if the background is not coloured, I just did some extreme colours to show what is happening.)

Note that this is not just reproducing the slide - the placement of the square is different.

Also if I include text on the slide this kind of thing happens:

\documentclass{beamer}
\setbeamercolor{background canvas}{bg=yellow}
\usepackage{tikz}
\begin{document}
    \begin{frame}
        Here is a purple square:
        
        \begin{tikzpicture}
            \draw[fill=violet] (0,0) rectangle (1,1);
        \end{tikzpicture}
    \end{frame}
\end{document}

produces this slide

Same with 'Here is a purple square:' on the slide

and the web version looks like this:

'Here is a purple square:' and underneath a yellow rectangle with a purple square inside

This is particularly bad with multiple images. For example I have stuff like this (with less extreme colours!):

\documentclass{beamer}
\setbeamercolor{background canvas}{bg=yellow}
\usepackage{tikz}
\begin{document}
    \begin{frame}
        Here are some squares: 
        
        \begin{columns}[T]
            \begin{column}{0.25\linewidth}
                \begin{tikzpicture}
                    \draw[fill=violet!20] (0,0) rectangle (1,1);
                    \node at (0.5,0.5) {A};
                \end{tikzpicture}
            \end{column}
            \begin{column}{0.25\linewidth}
                \begin{tikzpicture}
                    \draw[fill=violet!20] (0,0) rectangle (1,1);
                    \node at (0.5,0.5) {B};
                \end{tikzpicture}
            \end{column}
            \begin{column}{0.25\linewidth}
                \begin{tikzpicture}
                    \draw[fill=violet!20] (0,0) rectangle (1,1);
                    \node at (0.5,0.5) {C};
                \end{tikzpicture}
            \end{column}
            \begin{column}{0.25\linewidth}
            \begin{tikzpicture}
                \draw[fill=violet!20] (0,0) rectangle (1,1);
                \node at (0.5,0.5) {D};
            \end{tikzpicture}
            \end{column}
        \end{columns}
    \end{frame}
\end{document}

produces a slide like this

Yellow slide with three squares labelled A, B, C and D

and the web version looks like this

Each square is in its own big yellow rectangle

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions