font issue with sage-cell in html presentation

[Boyan Kostadinov]

I wanted to embed a sage-cell in an ioslides html presentation, which I created in RStudio, see the attached html. The sage-cell was properly displayed in the html slide in the presentation and it was correctly evaluated, but I could not see the sage code itself, which was just 1+2. See the attached screen capture. On the screen capture you can also see that the issue appears to be related to a sage font. Here is the error message:

Access to font at 'https://sagecell.sagemath.org/static/fontawesome-webfont.woff?v=3.0.1' from origin 'null' has been blocked by CORS policy: 

The 'Access-Control-Allow-Origin' header has a value 'https://sagecell.sagemath.org' that is not equal to the supplied origin.

The error can be seen in the screen capture when I opened the html presentation in latest version of Chrome. On the left side is the ioslides presentation with the sage-cell slide, where you can see the correct value of 3 after the cell was evaluated, but you cannot see the 1+2 code inside the cell. 

Any help would be much appreciated as I plan to use sage-cells in ioslides presentations quite a bit. It's a great resource!

Thanks,

B. 

[Andrey Novoseltsev]

It does not seem to be related to that font error message. Try typing something in the code box - after a while text becomes visible, but it is shifted from the cursor. So something is wrong with CodeMirror rendering. Any CSS experts out there who can debug it further?

[Boyan Kostadinov]

I tried typing in the code box and after a while the text becomes visible for me too, but like you said the cursor is shifted. 

[David Farmer]

I don't know anything about ioslides, but on lines 524-538
of the HTML I see this CSS:

pre {
font-family: 'Source Code Pro', 'Courier New', monospace;
font-size: 20px;
line-height: 28px;
padding: 10px 0 10px 60px;
letter-spacing: -1px;
margin-bottom: 20px;
width: 106%;
left: -60px;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

The line
left: -60px;
seems to be the culprit. Delete that line and it seems to be okay.

Where in the pipeline that gets inserted, someone else will need to
figure out.

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/f1bc579c-da4a-4785-b6c3-bc78e7f0207b%40googlegroups.com.
>
>

[Boyan Kostadinov]

Thanks David,

The problematic line appears to come from the ioslides CSS, which I found on their GitHub page. I’ll raise the issue with them.

Thanks again,
Boyan

Sent from my iPhone

> On Oct 27, 2019, at 5:59 PM, David Farmer <far...@aimath.org> wrote:
>
>