Replies: 2 comments 1 reply
-
Hello fbeleznay I suspect what you're aiming to do within an integral expression like this is not going to be possible with "native" KaTeX. (I'm happy to be proved wrong). But here's a workaround where I've created a new "expression5" based on your "expression4". Firstly, I'm going to remove the
I'm going to create my own box since (as you've found) the "native" box is placed behind the math, so the hover doesn't work as desired. Here's the outer box (based on the "base" class)
Here's the hover on the outer box:
The box around the lower limit:
The hover for the lower limit:
There's a vlist element above the right part of our lower box that stops the hover working on the whole box, so I remove it as follows:
Normally the sky would fall in if you do something like this (the spacing normally goes all over the place) but, here, it seems OK. Finally, to tidy up, I added this so the global "parts" hover didn't mess with my "expression5":
Below is the revised page. Hope it helps Regards
|
Beta Was this translation helpful? Give feedback.
-
When I don't know what someone's CSS is doing, I comment out the whole thing, then add one line at a time to see what it does.
The revised page (I believe) now does what you want for I would suggest though, that you get all the other aspects of your interface worked out before worrying about highlighting.
Since more than half of the users of the Web are now on small screens, could I strongly encourage you to develop for mobile first, then ensure it also works on larger screens. One way you could go about an editor is to make the various "boxes" of existing kaTeX expressions editable. In the revised page, I add a "contenteditable" attribute to the limits, the integrand and the differential of the integral. The user can type in the (green border) boxes. As they type, the math rendering is updated. You can do things like this: There's no error handling yet (you'll see a console error when beginning to type things like \sin or \pi) but I'll leave that as an exercise for the reader. :-) Alternatively, you could add a "click" listener to your button so the output only updates when the user is ready. Once again, I hope it helps get you started. New style:
New HTML
New script
|
Beta Was this translation helpful? Give feedback.
-
I am trying to highlight parts of a formula when I hover over the part.
I tried different ways, but only partially succeeded (my code is copied at the end of this post).
My code works with a usual looking formula, but have problems when I add a box around the parts that I would like to select.
In the first formula the 0 (in the lower limit of the integral) is highlighted fine when I move the cursor close enough to the 0.
In the second formula there is a very limited region for the cursor for the highlighting to appear. It seems that the box hides the content for the html style.
In the third formula the highlighting works when the cursor is above the border of the box, but not everywhere inside. Even then, the background highlighting does not fill the full box.
In the fourth example I used nested boxes. The partial highlighting works for the outer box, but now the highlighting stays active when the cursor is inside the box.
My ultimate goal would be something that highlights the full content of the outer box when the cursor is on the border (or inside) and only highlights the inner box when the cursor is on the border (or inside) this inner box.
Any help on achieving this goal would be appreciated.
Beta Was this translation helpful? Give feedback.
All reactions