reveal js - CSS help needed!

[Andrey Novoseltsev]

Hello,

I have received the following email from Roberto De Leo and while I can confirm the problems, I have no idea how to fix them. If anyone has insights, please share!

Andrey

-------------------------------------

I am quite happily using SageMathCell in my slides on numerical

solutions of ODEs

http://huhpcc.duckdns.org/~deleo/MATH247/Slides/ode.html

but its web interface does not interact well with the "reveal js"
environment.

In particular (my environment is Linux, my browser is Firefox):

1. the line numbers at the left of the sage editing window are often
over the content (often though they do get at their correct position if
I do reload the page);

2. when I click somewhere in the window, the cursor does not show up
where it actually is, so when I edit the code I'm "blind";

3. if I go down with the cursor, the editor does not follow it and I
must use the mouse to go down by using the right bar;

4. if I try to select code, the window gets very messy.

Having code in slides is very useful, I wonder whether there is some
easy solution to these problems (btw, it would be nice also to be able
to give a fixed size for the pictures in output).

Anyways, thanks a lot to all developers for this very useful and cool
software!

Best,

--
Roberto De Leo
Associate Professor, Department of Mathematics
Howard University, Washington, DC
Office: ASB-B, Room 214
http://huhpcc.duckdns.org/~deleo/

[David Farmer]

I don't fully understand the problem, but I think it comes down
to when .CodeMirror-sizer figures out the size of its container.

A sage cell is a large number of nested divs. If you start looking
at the size of those divs (I am using the inspector in Firefox)
you will see that all of them are the same size, except for

< div class="CodeMirror-sizer" style=.... >

which is larger and shifted to the left of where it should be.
If you look at the highlighted region when you focus on it in
inspector (yellow for padding, blue for contents) you will
see that the section with the numbers is too wide, but otherwise
the contents of the cell are where the .CodeMirror-sizer wants
them to be.

So I speculate that something outside the sage cell has changed
its size after the cell has set itself up. If you modify the
css (in inspector or otherwise) and in

reveal .slides > section,
remove the
width: 100%

then you will find that the cell looks better. It also helps
in div.slides to remove the inline style that sets width=960px .

I think all of this points to the sage cell being created before the
rest of the page is set up. (Or to the sage cell code having a bug
in how it figures out what size to make the div.CodeMirror-sizer .
But I think that is unlikely, because different parts of JavaScript
not waiting long enough, or not running in the correct order,
is a common problem. Also see the next paragraph.)

By the way, I re-loaded the page and the cell looked good and also
seemed to work properly. (But not always, and sometimes some look
right and some don't). I think this supports the suggestion that it
is the sage cell code running at the wrong time.

I never used reveal so I can't suggest how to fix this.

Regards,

David

> --
> You received this message because you are subscribed to the Google Groups "sage-cell" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to
> sage-cell+...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/sage-cell/6ed4788e-e006-47fd-a937-2879db494fc3%40googlegroups.com.
>
>

[Andrey Novoseltsev]

Thanks a lot for your analysis, David!

Could you also reproduce weird cursor behaviour, i.e. that it shows up in one place while in reality it is editing in a different one? Any insights into that?

[David Farmer]

I see the weird cursor behavior, but I suggest fixing the other problem
and seeing if that magically fixes the cursor.

> --
> You received this message because you are subscribed to the Google Groups "sage-cell" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to
> sage-cell+...@googlegroups.com.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/sage-cell/6daa5525-1f76-486f-8043-02cb8a9d43ff%40googlegroups.com.
>
>

[Rob Beezer]

Thanks, Andrey and David. We now take PreTeXt source and make a reveal.js slideshow with Sage Cells. So we want to keep track of this one. David - could you make minimal PTX GitHub issue with a pointer to this Google thread? I can embellish it later, but can't now and risk losing track of it.

Rob