RevealJS CSS

[Andrew Scholer]

The location/generation of CSS for revealjs is currently in an in between state. I would like to move it firmly to one state or another and am looking for guidance by those passionate about revealjs.

The revealJS CSS currently lives in the pretext-reveal.xsl file used to output the slideshow and is rendered directly into the slideshow file. I presume this is to make the final html as modular as possible. (Although any images are still in separate files that need to be kept adjacent to the slideshow html).

When I set up the CSS build system, I set up a revealjs css build target but did not integrate it into the revealJS HTML build process. So we have a CSS file css/dist/revealjs.css that doesn't actually get used.

I think we should either complete that integration or drop the revealjs CSS build target. Here the two paths:

Option 1:
Leave revealjs CSS where it is, hard coded into the xsl file. Drop the revealjs css build target.

Option 2:

Modify the build process to "inject" the revealjs.css file that is being built into css/dist into the html file produced by pretext-reveal.js. (Part of that would be ensuring the built revealjs.css has any recent updates so it matches the hardcoded version currently in use.)

Both options will result in the same HTML output and same embedded CSS. So this is really just about the build process.

IMO, switching to option 2 has the following advantages:

• Ability to share rules with HTML CSS. The revealjs CSS shares only a small fraction of the rules used by the standard HTML CSS. So the gain here is minimal. But things like list-styling only need to be maintained in one place.
• CSS stored in proper file type for development. Development tools (editors, linters, formatters, etcl...) are going to be of more use on a CSS file than CSS embedded in XSL.
• It would make it easier to provide a hook for the wholesale replacement of the CSS should someone want/need to provide their own CSS for all their slideshows.

Anyone with strong thoughts on the matter, please share them. While I think #2 would be better, I don't really have any personal investment in revealjs. I am happy to implement whichever option is favored by those with the most invested in revealjs.

Andrew Scholer (he/him/his)

Computer Science Instructor

Chemeketa Community College

503.589.7649 

computerscience.chemeketa.edu/people/andrew-scholer/

[David W. Farmer]

You can reject Option 1 because it is just an historical artifact:

Back when the CSS was on a server and you had to be online for it
to work, it was recognized that a person using Reveal did not want
to have their presentation jeopardized if they were no online.

So, we had to do something special for Reveal.

No reason to give any weight to that decision from long ago.

Regards,

David

On Tue, 8 Jul 2025, Andrew Scholer wrote:

> The location/generation of CSS for revealjs is currently in an in between state. I would like to move it firmly to one state or another and am
> looking for guidance by those passionate about revealjs.
>
> The revealJS CSS currently lives in the pretext-reveal.xsl file used to output the slideshow and is rendered directly into the slideshow file. I
> presume this is to make the final html as modular as possible. (Although any images are still in separate files that need to be kept adjacent to
> the slideshow html).
>
> When I set up the CSS build system, I set up a revealjs css build target but did not integrate it into the revealJS HTML build process. So we have
> a CSS file css/dist/revealjs.css that doesn't actually get used.
>
> I think we should either complete that integration or drop the revealjs CSS build target. Here the two paths:
>
> Option 1:
> Leave revealjs CSS where it is, hard coded into the xsl file. Drop the revealjs css build target.
>
> Option 2:
> Modify the build process to "inject" the revealjs.css file that is being built into css/dist into the html file produced by pretext-reveal.js.
> (Part of that would be ensuring the built revealjs.css has any recent updates so it matches the hardcoded version currently in use.)
>
>
> Both options will result in the same HTML output and same embedded CSS. So this is really just about the build process.
>
> IMO, switching to option 2 has the following advantages:

> * Ability to share rules with HTML CSS. The revealjs CSS shares only a small fraction of the rules used by the standard HTML CSS. So the gain

> here is minimal. But things like list-styling only need to be maintained in one place.

> * CSS stored in proper file type for development. Development tools (editors, linters, formatters, etcl...) are going to be of more use on a CSS

> file than CSS embedded in XSL.

> * It would make it easier to provide a hook for the wholesale replacement of the CSS should someone want/need to provide their own CSS for all

> their slideshows.
>
> Anyone with strong thoughts on the matter, please share them. While I think #2 would be better, I don't really have any personal investment in
> revealjs. I am happy to implement whichever option is favored by those with the most invested in revealjs.
>
>
> Andrew Scholer (he/him/his)
> Computer Science Instructor
> Chemeketa Community College
> 503.589.7649 
> computerscience.chemeketa.edu/people/andrew-scholer/
>

> --
> You received this message because you are subscribed to the Google Groups "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.
> To view this discussion visit
> https://groups.google.com/d/msgid/pretext-dev/CACm44N8%2Bo87Nou5uzqduRKULHrw0kbeVB0pDU18CGqAL%2BiYa4g%40mail.gmail.com.
>
>

[David Austin]

I am an enthusiastic user of the revealjs format but don't know a lot about CSS.  Since this format is meant for presentations, I like to do a little customization of the theme's CSS, just to make the slides a little bit unique, following along to Local Resources and editing slightly the file theme/solarized.css (though I use a different theme).  It would be nice to preserve an author's ability to provide some customization in this way, but I'm not sure what that means for Andrew's proposal.

David

To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/16f7b3d4-b82-175b-ccb7-50c65c59a64f%40aimath.org.

[Rob Beezer]

I'm a sometime-passionate user. But only when I have a deadline for a
presentation. And a lot of the (minimal) development of this happens then.

* The CSS is in the HTML file only because the folks who initiated this did it
that way. No notion of portability, as you will see later. It was an expedient.

* RevealJS has its own themes, David mentioned "solarized". There are PreTeXt
publisher variables to set these. Our themes, Reveal themes, David's uniquw
customizations. Not sure what is best.

* To run a presentation you need a pile of JS and CSS from Reveal alongside our
output.

PROJECT: for somebody who knows Python (Sean, David A?). Extend the Python
routine to go grab all the Reveal extras and park them in the right place. Add
an option (revealjs-zip) to package everything up in a zip file for movement or
archiving.

* There is an option for MathJax that sounds like a local copy. Its just a shim
to get MathJax like we do now. So your presentation with math *must* have a
decent Internet connection.

PROJECT: build math bits offline as PNG or SVG and incorporate into the final
HTML. We do this already for EPUB. And we make math as braille for braille,
and for PreFigure. So there are mature tools for most of this already.

Well, now I have thoroughly hijacked this thread. I might as well add

PROJECT: figure out image sizing in Reveal slideshows.

Lots to do - CSS is one important piece. Thanks, Andrew, for your interest in
attacking this part. I hope others are simiulary interested in some of the
other parts.

Rob

[David Austin]

PROJECT: build math bits offline as PNG or SVG and incorporate into the final
HTML.  We do this already for EPUB.  And we make math as braille for braille,
and for PreFigure.  So there are mature tools for most of this already.

I could take care of this since, as noted, PreFigure does something very similar.  I could probably do the reveal extras management too, but I've got a couple of other things going on (I know, who doesn't).  Maybe @Sean would be interested in that?

Lots to do - CSS is one important piece.  Thanks, Andrew, for your interest in
attacking this part.  I hope others are simiulary interested in some of the
other parts.

Rob

--
You received this message because you are subscribed to the Google Groups "PreTeXt development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/MTAwMDAzOS5iZWV6ZXI.1751994288%40pnsh.

[Andrew Scholer]

Thanks all. Based on all of that I plan on doing the following:

• Update the revealjs build to place the generated CSS in the output folder next to the HTML and link to that (dropping the embedded CSS).
• Add a pub var to allow for an authored CSS file that gets linked in after the standard CSS. It sounds like slides get a fair amount of personalization/local fixes. A sidecar CSS file should reduce the need to do a localized install of reveal.js files just to override some of their CSS.

Andrew Scholer (he/him/his)

Computer Science Instructor

Chemeketa Community College

503.589.7649 

computerscience.chemeketa.edu/people/andrew-scholer/

To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/CANXmVMAKA%3DsVm1W53ZwXV91hKid37ZH1tYfwDo1zVpR5F4hC6g%40mail.gmail.com.

[Sean Fitzpatrick]

Funnily enough, I just commented on

https://github.com/PreTeXtBook/pretext/issues/2235

yesterday. 

Over there, Rob asked me to try something like this about a year ago, bit it never made it near the top of my to-do list. 

Rob's suggestion at the time was to grab the CSS from the revealjs CDN and bundle it up somehow. 

This was just far enough out of my Python comfort zone to make it something I'd need to devote a day or two to.

To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/CACm44N-Y-2OTnXGeciHud%2BXGq6H7hwQzSajmVvQE1NZ%3DymLzXg%40mail.gmail.com.

[David Austin]

Maybe we can talk about this in an upcoming drop in just to make sure we're on the same page (i.e. I know what I'm supposed to be doing!).

To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/CAH%2BNcPYwX5iWsouffe%3DseRJgVz%3DfZkNccOU%2BhsV1KrXrwnHbPg%40mail.gmail.com.

[Andrew Scholer]

Most of the css/js libraries available/used in the slideshows (mathjax, prism) are available as node packages. So one way to package them for offline use would be to make a node package, add the commonly used libraries to the package, and then make a wrapper .js file that imported and exposed the libraries. Then esbuild (the tool used for the CSS building) could be used to automatically build that into a single file with "npm run build".

https://esbuild.github.io/getting-started/#your-first-bundle

Andrew Scholer (he/him/his)

Computer Science Instructor

Chemeketa Community College

503.589.7649 

computerscience.chemeketa.edu/people/andrew-scholer/

To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/CANXmVMC9msE843Zw_eTN5HGUJiFMEGtavh%2BLUs1RSOm_HLr6fw%40mail.gmail.com.

[Andrew Scholer]

PR: https://github.com/PreTeXtBook/pretext/pull/2598

Andrew Scholer (he/him/his)

Computer Science Instructor

Chemeketa Community College

503.589.7649 

computerscience.chemeketa.edu/people/andrew-scholer/

[David Austin]

Follow up to a conversation in today's drop in:

I did some experimentation embedding MathJax output directly into an HTML page in the minimal article.  Remember that PreTeXt configures MathJax for CHTML rather than SVG (line 12929 in pretext-html.xsl).  If I open the inspector on a MathJax expression, grab the resulting HTML code, and paste it directly into the HTML, the output isn't right.  We should see x^2 + 2y^2 = z^2, but all we see are the 2's and the equal sign, that is, x, y, and z are missing.  The screen reader doesn't reproduce the expression properly either (we just hear "superscript" a bunch of times).  I fiddled around with a couple of things without any improvement.

I then used the context menu to request that the math be rendered as SVG and pasted that into the HTML page.  The math expression renders properly, and all the speech data is contained in an #mjx-assistive-mml.  When the focus goes to the math expression using the screen reader, the expression is boxed as we'd expect, but there is no speech available. 

I then tried creating math expressions with the mj-sre-page script and pasting them into the HTML in the same way.  In particular, setting the "svgenhanced" option produces an SVG with all the speech data contained inside an #svg/g element.  The expression looks good, but the screen reader just completely ignores it.  

So I wasn't successful in reproducing the screen reading capabilities, but all the data is there so it seems like it should be possible.  I just don't know how!  Also, I'm just using the not-so-great linux screen reader.

David

To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/CACm44N-xRf_4ECDAzifN1nirxRT--rN%2BfHd4cF_ODzKv_%2BDcuQ%40mail.gmail.com.

[Rob Beezer]

Thanks very much, David, for all the mucking around with the MathJax internals.
Very interesting, and perhaps promising, but it doesn't sound like a slam dunk.

Relieving the RevealJS slideshows from an online MathJax dependency is not the
most pressing issue. Andrew has a PR getting the CSS ship-shape and that should
be a big improvment.

Let's put MathJax on hold for the moment. They say MJ v4 drops July 31. We
will need to adjust on various fronts, not least PreFigure tactile, and Braille
generally. Maybe some of this will become clearer as we do that work, and
almost-certainly we will need to make some configuration changes anyway.

Rob

On 7/14/25 16:07, David Austin wrote:
> Follow up to a conversation in today's drop in:
>
> I did some experimentation embedding MathJax output directly into an HTML page
> in the minimal article.  Remember that PreTeXt configures MathJax for CHTML

> rather than SVG (line 12929 in pretext-html.xsl <https://github.com/PreTeXtBook/
> pretext/blob/c750a05a2c35cad67dd269682e1618e3c1eb63dc/xsl/pretext-
> html.xsl#L12919>).  If I open the inspector on a MathJax expression, grab the

> resulting HTML code, and paste it directly into the HTML, the output isn't
> right.  We should see x^2 + 2y^2 = z^2, but all we see are the 2's and the equal
> sign, that is, x, y, and z are missing.  The screen reader doesn't reproduce the
> expression properly either (we just hear "superscript" a bunch of times).  I
> fiddled around with a couple of things without any improvement.
>
> I then used the context menu to request that the math be rendered as SVG and
> pasted that into the HTML page.  The math expression renders properly, and all
> the speech data is contained in an #mjx-assistive-mml.  When the focus goes to
> the math expression using the screen reader, the expression is boxed as we'd
> expect, but there is no speech available.
>
> I then tried creating math expressions with the mj-sre-page script and pasting
> them into the HTML in the same way.  In particular, setting the "svgenhanced"
> option produces an SVG with all the speech data contained inside an #svg/g
> element.  The expression looks good, but the screen reader just completely
> ignores it.
>
> So I wasn't successful in reproducing the screen reading capabilities, but all
> the data is there so it seems like it should be possible.  I just don't know
> how!  Also, I'm just using the not-so-great linux screen reader.
>
> David
>
> On Wed, Jul 9, 2025 at 12:57 PM Andrew Scholer <andrew....@chemeketa.edu

> <mailto:andrew....@chemeketa.edu>> wrote:
>
> PR: https://github.com/PreTeXtBook/pretext/pull/2598 <https://github.com/
> PreTeXtBook/pretext/pull/2598>

>
> Andrew Scholer (he/him/his)
> Computer Science Instructor
> Chemeketa Community College
> 503.589.7649

> computerscience.chemeketa.edu/people/andrew-scholer/ <http://

> computerscience.chemeketa.edu/people/andrew-scholer/>
>
>
> On Wed, Jul 9, 2025 at 7:56 AM Andrew Scholer <andrew....@chemeketa.edu
> <mailto:andrew....@chemeketa.edu>> wrote:
>
> Most of the css/js libraries available/used in the slideshows (mathjax,
> prism) are available as node packages. So one way to package them for
> offline use would be to make a node package, add the commonly used
> libraries to the package, and then make a wrapper .js file that imported
> and exposed the libraries. Then esbuild (the tool used for the CSS
> building) could be used to automatically build that into a single file
> with "npm run build".

> https://esbuild.github.io/getting-started/#your-first-bundle <https://
> esbuild.github.io/getting-started/#your-first-bundle>

>
> Andrew Scholer (he/him/his)
> Computer Science Instructor
> Chemeketa Community College
> 503.589.7649

> computerscience.chemeketa.edu/people/andrew-scholer/ <http://

> computerscience.chemeketa.edu/people/andrew-scholer/>
>
>
> On Tue, Jul 8, 2025 at 6:09 PM David Austin <david.a...@gmail.com
> <mailto:david.a...@gmail.com>> wrote:
>
> Maybe we can talk about this in an upcoming drop in just to make
> sure we're on the same page (i.e. I know what I'm supposed to be
> doing!).
>
> On Tue, Jul 8, 2025, 7:38 PM Sean Fitzpatrick
> <dsfitz...@gmail.com <mailto:dsfitz...@gmail.com>> wrote:
>
> Funnily enough, I just commented on

> https://github.com/PreTeXtBook/pretext/issues/2235 <https://
> github.com/PreTeXtBook/pretext/issues/2235>

> yesterday.
>
> Over there, Rob asked me to try something like this about a year
> ago, bit it never made it near the top of my to-do list.
>
> Rob's suggestion at the time was to grab the CSS from the
> revealjs CDN and bundle it up somehow.
>
> This was just far enough out of my Python comfort zone to make
> it something I'd need to devote a day or two to.
>
> On Tue, Jul 8, 2025, 2:25 p.m. Andrew Scholer
> <andrew....@chemeketa.edu

> <mailto:andrew....@chemeketa.edu>> wrote:
>
> Thanks all. Based on all of that I plan on doing the following:
>

> * Update the revealjs build to place the generated CSS in

> the output folder next to the HTML and link to that
> (dropping the embedded CSS).

> * Add a pub var to allow for an authored CSS file that

> gets linked in after the standard CSS. It sounds like
> slides get a fair amount of personalization/local fixes.
> A sidecar CSS file should reduce the need to do a
> localized install of reveal.js files just to override
> some of their CSS.
>
>
>
> Andrew Scholer (he/him/his)
> Computer Science Instructor
> Chemeketa Community College
> 503.589.7649
> computerscience.chemeketa.edu/people/andrew-scholer/

> <http://computerscience.chemeketa.edu/people/andrew-scholer/>

>
>
> On Tue, Jul 8, 2025 at 12:56 PM David Austin

> <david.a...@gmail.com <mailto:david.a...@gmail.com>>

> wrote:
>
> PROJECT: build math bits offline as PNG or SVG and
> incorporate into the final
> HTML.  We do this already for EPUB.  And we make
> math as braille for braille,
> and for PreFigure.  So there are mature tools for
> most of this already.
>
>
> I could take care of this since, as noted, PreFigure
> does something very similar.  I could probably do the
> reveal extras management too, but I've got a couple of
> other things going on (I know, who doesn't).
> Maybe @Sean would be interested in that?
>
> Lots to do - CSS is one important piece.  Thanks,
> Andrew, for your interest in
> attacking this part.  I hope others are simiulary
> interested in some of the
> other parts.
>
> Rob
>
> --
> You received this message because you are subscribed
> to the Google Groups "PreTeXt development" group.
> To unsubscribe from this group and stop receiving
> emails from it, send an email to pretext-

> dev+uns...@googlegroups.com <mailto:pretext-
> dev%2Bunsu...@googlegroups.com>.

> To view this discussion visit https://
> groups.google.com/d/msgid/pretext-dev/

> MTAwMDAzOS5iZWV6ZXI.1751994288%40pnsh <https://
> groups.google.com/d/msgid/pretext-dev/
> MTAwMDAzOS5iZWV6ZXI.1751994288%40pnsh>.

>
> --
> You received this message because you are subscribed to
> the Google Groups "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails
> from it, send an email to pretext-

> dev+uns...@googlegroups.com <mailto:pretext-
> dev+uns...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/
> d/msgid/pretext-dev/

> CANXmVMAKA%3DsVm1W53ZwXV91hKid37ZH1tYfwDo1zVpR5F4hC6g%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-dev/CANXmVMAKA%3DsVm1W53ZwXV91hKid37ZH1tYfwDo1zVpR5F4hC6g%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the
> Google Groups "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails
> from it, send an email to pretext-

> dev+uns...@googlegroups.com <mailto:pretext-
> dev+uns...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/

> msgid/pretext-dev/CACm44N-
> Y-2OTnXGeciHud%2BXGq6H7hwQzSajmVvQE1NZ%3DymLzXg%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-dev/CACm44N-Y-2OTnXGeciHud%2BXGq6H7hwQzSajmVvQE1NZ%3DymLzXg%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the
> Google Groups "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from
> it, send an email to pretext-dev...@googlegroups.com

> <mailto:pretext-dev...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/
> pretext-dev/

> CAH%2BNcPYwX5iWsouffe%3DseRJgVz%3DfZkNccOU%2BhsV1KrXrwnHbPg%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-dev/CAH%2BNcPYwX5iWsouffe%3DseRJgVz%3DfZkNccOU%2BhsV1KrXrwnHbPg%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the Google
> Groups "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to pretext-dev...@googlegroups.com

> <mailto:pretext-dev...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/
> pretext-dev/

> CANXmVMC9msE843Zw_eTN5HGUJiFMEGtavh%2BLUs1RSOm_HLr6fw%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-dev/CANXmVMC9msE843Zw_eTN5HGUJiFMEGtavh%2BLUs1RSOm_HLr6fw%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to pretext-dev...@googlegroups.com <mailto:pretext-
> dev+uns...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/

> CACm44N-xRf_4ECDAzifN1nirxRT--rN%2BfHd4cF_ODzKv_%2BDcuQ%40mail.gmail.com
> <https://groups.google.com/d/msgid/pretext-dev/CACm44N-
> xRf_4ECDAzifN1nirxRT--rN%2BfHd4cF_ODzKv_%2BDcuQ%40mail.gmail.com?
> utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an email

> to pretext-dev...@googlegroups.com <mailto:pretext-
> dev+uns...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/

> CANXmVMB_0yXQsmeLr4XtvY_ZfsKOJFKQh1Ad6675wr-6HW9VGA%40mail.gmail.com <https://
> groups.google.com/d/msgid/pretext-dev/
> CANXmVMB_0yXQsmeLr4XtvY_ZfsKOJFKQh1Ad6675wr-6HW9VGA%40mail.gmail.com?
> utm_medium=email&utm_source=footer>.

[David Austin]

That sounds good to me.

To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/pretext-dev/MTAwMDA0NS5iZWV6ZXI.1752594497%40pnsh.