Repository navigation
Fix math mode rendering in browser #809
Description
Hi, I've noticed that equations written in math mode are not always rendered correctly in a browser. Fixing this would make the learning experience better for people that use separate devices for reading and solving katas.
Example of the problem
Equations written in consecutive lines are rendered as one-line equation.
In the SingleQubitGate kata under the "Matrix Representation" section the equations for
The problem is also visible in Complex Arithmetic kata under the "Imaginary numbers" section. There three equations are displayed on one line.
I can fix this by dividing the equations into multiple math sections instead of using \\ to generate a new line. For example $$eq1 \\ eq2$$ would be transformed into $$eq1$$ $$eq2$$. Here you can view example of my fix.
Technical details
I've verified that this rendering problem exists on Edge, Firefox and Chrome.
Changing the color of an equation is also broken in the browser (See: SingleQubitGates -> Ket-bra decomposition).
If you don't have any objections to this fix, I can search and fix the rendering problems also in other notebooks. If I do that it would be nice to know which katas are equation-heavy, so if you know please share.
The list of katas/tutorials/workbooks to review and fix, following the learning path. I expect most of the issues will be in tutorials and workbooks, since they have more formulas compared to the katas themselves.
- Quantum Computing Concepts: Qubits and Gates, minus Superposition (Adam Kania (@remilvus))
- Superposition
- Quantum Computing Concepts: Measurements
- Visualization tools
- Simple algorithms
- Quantum Oracles and Simple Oracle Algorithms
- Grover's search algorithm
- QFT & QPE
- Entanglement games
- Reversible computing
- Miscellaneous
Activity
tcNickolas commentedon Jul 28, 2022
This can be a good thing to fix indeed. We've always assumed that the main use case for the katas is interactive, since the project started with the katas, and added tutorials and workbooks that had valuable reading material only much later! So we never spent time on renderings in GitHub preview mode.
Some things might just not be supported - I'm not sure GitHub previewer handles color at all? And there might be more broken things, for example, Ket-bra decomposition from your example shows up as several notes broken up by > signs rather than a single unbroken note.
If you have time to track down this kind of issues and figure out how to fix them without breaking the rendering in interactive mode, that will be great!
As for which ones have the most formulas... I think the tutorials and the workbooks for the katas/tutorials that have them are going to have most multi-line formulas, the katas themselves are less likely to have them, since they only have task descriptions that are typically less formula heavy.
remilvus commentedon Jul 29, 2022
GitHub previewer can handle color, but when the
\colorcommand is used, it seems to color everything until the end of the line. This can be fixed by adding more curly brackets to make the scope of\colormore explicit.The note broken up by
>signs was my mistake. I'm not used to using/seeing notes in notebooks, and I didn't notice that my fix broke the note. It's all fixed now, thanks for catching that!The directions to formula heavy notebooks will be helpful. Thanks!
[-][Qubits and Gates] Fix math mode rendering in browser[/-][+]Fix math mode rendering in browser[/+]remilvus commentedon Jul 29, 2022
I've fixed the rendering problems in almost all katas and workbooks from Quantum Computing Concepts: Qubits and Gates section of the Learning Path. In this section only the Superposition workbook still has rendering errors.
Unfortunately, I don't have enough time to track down all of the rendering errors, so help would be appreciated. Mariia Mykhailova (@tcNickolas) do you think that this is a "good first issue"?
tcNickolas commentedon Aug 4, 2022
Yes, the issue is easy to identify, and you did a great job with the first batch of fixes to show how they can be applied (though it takes considerable patience!), so it will make a "good first issue". I can label it as such, and I can add a checklist of tutorials and workbooks that still have to be addressed, like I did for #542, so that the contributors don't have to sign up to do everything at once, but rather work on subsets of notebooks.
Thank you for starting this effort!
Fix math mode rendering in GitHub preview, part 1 (#814)
remilvus commentedon Aug 5, 2022
Thanks! A tip for other contributors: almost all problems can be solved by the two techniques I mentioned previously. That is:
\color{red} <symbol>->{ \color{red} <symbol> }$$eq1 \\ eq2$$->$$ eq1 $$ $$ eq2 $$