Chrome rendering MathJax equations with a trailing vertical line - google-chrome

I am working through Andrew Ng's machine learning course on Coursera using the Octave kernel for Jupyter and of course MathJax provides the equation rendering. This thin bar appears on the right side of every equation, and only in Chrome. Any thoughts on where in the stack things might be going wrong?

This is a known issue caused by Chrome changing its rounding behavior. It will be fixed in the next release. See https://github.com/mathjax/MathJax/issues/1300

A quick and dirty method is right click one of them and select another renderer in Math Setting -> Math Renderer
Another method is create a bookmark of this link: javascript:$('.math>span').css("border-left-color","transparent") and click it in pages that use mathjax.

If your MathJax is not the latest version, you can add this to the css style:
.MathJax nobr>span.math>span{border-left-width:0 !important};
then this problem can be solved.

Related

How do I repair html hinting

On one of my vscode installations html hints I working fine (when in html mode I type lin I see this>
on another only the first line and none of the html link hints. What I did
removed all extention
reinstalled visual studio code in place
removed and reinstall visual studion code
I don't see anything suspicious in the debug pane.
How do I repair my VSCode?
Life saver Mark <3. Thanks!
It is a bit fiddly, but indeed the hints box can be sized to a useless single line size. As I see no real use case for this it could be regarded as bug.
Drag the upper or lower border up or down.
To increase success increase zoom size.

How to reduce white space in octave legend function

I have build some algorithm and now I should make things pretty enough for presentation. Only problem what I have is a "strange" legend behaviour in octave. I dont know if the problem is because I am using "subplot" function, but I have tried several ideas what was possible to find on google, but none of that really works.
At the uploaded picture we can see that diagram lines names are moved all the way to the left (nothing wrong with that), however there is too much space on the right side of the line names. The legend box is simply too big for the context inside. I have tried already with reducing the size of the font, but is not the best solution.
Can somebody please provide some solution for my problem. My current code status is:
hleg1 = legend({"sample1", "sample2", "sample3"});
set(hleg1, "FontSize", 8);
I currently using Octave version 5.1.0 on windows 10 x64.
The fix for me was te execute the plotting script twice.
The first time you resize the window in full screen mode.
Then you execute the script again (without closing the figure window)
Now legends should not take half the space of your plot ;)

An overlay GTK toolbar/widget

I am writing a custom application in C using GTK+2.0 and Cairo. Just for learning purposes (and if successful, then for deployment), I wish to recreate something similar to a overlay toolbar/widget (I am sorry if the terminology is not correct) that appears when a mouse moves over a given area on the window, and disappears when the mouse moves away. The toolbar, as I imagine, should appear on top of the existing widgets without displacing them or altering the widget packing in any way. Is it possible to accomplish? If yes, can you please point me to relevant tutorials/examples and/or outline a way to do the same?
Thanks in advance.
Not sure this is easily doable in GTK2. However, I learned recently that there's the GtkLayout widget which allows pixel exact rendering of widgets, so you can even display some widgets over others. Or you may implement your own container widget.
Please note that since GTK3, there's GtkOverlay which seem to do what you want.
You may also give a look to Clutter, which might allow this. Furthermore, there are projects of merging GTK and Clutter for GTK 4.
The little known GtkHandleBox is capable of doing what you want. I must warn you it is deprecated in GTK+3 because is going against the usual UI direction. Also, the correct positioning will be subject to the windows manager quirks, so I'd expect some issue in this regard.

How do you measure absolute pixel count?

I've recently found that most of the measurements I thought I knew were actually different from what I thought they where due to browser specific defaults. I assessed that all my knowledge of my visual inspections were relative...item A is 20px so I can see that Item B is 22px. However because of browser hidden defaults...this method doesn't work too well. How can I know what absolute pixel count is.
Currently, I just created a 20px by 20px ruler in a graphics editor with tick marks.
Attached here
Now I can move this around by using absolute positioning and measure things. However is there something built into the development tools to do this. I'm using Firefox 10 right now.
Thanks
Chrome's inspector tool shows the dimension of any element that you happen to hover over. However, if you must remain loyal to Firefox, Firebug can show the exact dimensions of any element upon hover as well. When you open up Firebug, click "Layout" in the sidebar to the right. Then, when you hover over an element, the dimensions will appear within that box (no clicking necessary). Not exactly as intuitive as Chrome's inspector tool, but it works regardless.
Are you just looking for a tool to easily measure heights and widths without messing around in Firebug?
I'd suggest this add-on for Firefox (also available for Chrome): Web Developer
If this isn't what you're looking for, can you please clarify?
Edit: If you can't install software or add-ons, use the no-install Firebug Lite
there is a sweet measurement tool called "measure it." you can find it HERE. that's the best one i have found so far.
another thought... you could check and make sure all of your different browsers aren't at all zoomed in... view actual size etc...
also - are you using a "reset" of any kind ? if not - you could check out the meyer reset - or normalize... or - the freak reset... (that combines both).

CSS3 Transforms, Layering, and Diagnostics

I've recently been developing a micro-site that uses some of the newer 3D effects transforms in CSS3. However, I've been trying to get a little too tricky with layering so that certain optical illusions take effect and it's been the cause of numerous headaches...
In general, there's this issue in Chrome (but not Firefox, haven't yet tried Safari or IE) where everything seems to "render" appropriately onscreen, but when I go to click a link or highlight some text in one of the more "tricky-layered" areas, my cursor goes limp and I'm unable to get any functionality. I can see everything just fine, it's just there's an invisible wall preventing my cursor from interacting, if that helps the explanation.
Without pasting a mile-long piece of experimental code, does anyone know off the top of their head what might be causing this issue? My best guess is that the z-index inheritance has gone awry at some point but it's difficult to diagnose... leading to my next question of whether or not anyone knows of any good strategies for layering diagnostics (tools would be great here as well)!
I'm of course well-versed in the standard Developer Tools/Firebug...
Thanks guys!
Okay, so I solved my problem and came up with the following strategy for future reference in diagnosing layering issues...
Check discreet Z-Index values of all elements that may be interfering with one another. Re-order them if necessary and see if that solves the problem. If not, move on.
Check discreet positioning on all elements from step 1. Make sure they are declared to either have "position: absolute" or "position: relative" in CSS markup. DO NOT RELY ON INHERITANCE/DEFAULTS. ABSOLUTE DECLARATION IS KEY.
Check your "backface-visibility" values. If your setup is complex, it's easy to lose track of what's what.
Following that pattern is what finally did it for me. My problems turned out to be a combination of all 3 but they didn't necessarily reveal themselves to me until I followed the steps above.