search

openwebwork / webwork2

Course management front end for WeBWorK
http://webwork.maa.org/wiki/Main_Page
Other
146 stars 165 forks source link

bootstrap code styling #2634

Open Alex-Jordan opened 4 days ago

Alex-Jordan commented 4 days ago

Here's a screenshot from an exercise we use:

Screenshot 2024-11-22 at 12 51 23 PM

A student complained that the "P" and "C" in the instructions are too small and at first they thought these were lowercase. It turns out those are coming out at 0.875 scale. It seems this is bootstrap styling for a code HTML element, which is what PGML does for [| ... |]*.

Should we make [| ... |]* doe something else? Maybe still code, but styled at 100%?

drgrice1 commented 4 days ago

We can see what can be done about that. However, I would also say that the "P" and "C" here should really not be code. Those should be math mode typeset with MathJax.

Alex-Jordan commented 4 days ago

That's fine for this one, but in general this is used when trying to tell the student what to type. I have no opinion on using the HTML code element, just something that is monospace.

Alex-Jordan commented 4 days ago

I suppose if this comes to not using code here, it is a pg issue, not a webwork2 issue.

drgrice1 commented 4 days ago

I was not saying that the code font size shouldn't be fixed. I was just pointing out that particular case.

drgrice1 commented 4 days ago

I am not sure how much of a problem this really is. That particular case is a case where code shouldn't be used. If I use code with more general text then the size doesn't really seem off. Here is a screenshot: code

On the top line the code text size isn't that different than the size of the other text. On the second line you can compare the sizes of math typeset via MathJax, code, and regular text.

somiaj commented 4 days ago

To me I have never liked the default bootstrap color for code blocks and find that harder to deal with than the size.

drgrice1 commented 4 days ago

Yeah, the contrast is not sufficient against the problem background color.

drgrice1 commented 4 days ago

If you want to play with the style for code tags in a problem, the best place to do this is in the pg/htdocs/js/Problem/problem.scss file. I suggest adding a rule in the .problem-content section like

    code {
        --bs-code-color: black;
    }

This will specifically override Bootstrap's color. You could also just use color, but this has the advantage of if the problem is rendered on another system where Bootstrap is not present, and that system has a better color choice for code tags, then that color will be used. If you want to force the color anywhere a problem is rendered, then just use color.

Of course you can also play with the font size if you like.

I don't use this in problems. I don't have any situation in any of my problems where I think that a code tag or more generally a monospace font is appropriate. So you should try this out with the problems where you use this.