Ensure that Mathjax underscores are consistent with the height of other characters

Presented below is the latex code being used with Mathjax.

\class{mathjaxCursor}{\text{_}}

...and here is the accompanying css:

.mathjaxCursor
{
    font-weight: bold;
    background-color: red;
}

This setup results in the following display:

https://i.stack.imgur.com/Ebv79.jpg

Now, let's examine a different latex example:

5\class{mathjaxCursor}{\text{_}}

Using the same CSS produces the following output:

https://i.stack.imgur.com/PRLII.jpg

The issue I am facing is that when the digit '5' is displayed along with an underscore, the height of the underscore matches the full font height instead of just the underscore's height. Can you recommend a modification to the CSS so that the underscore maintains a normal character height?

This problem becomes more evident when wrapping a root around the underscore:

https://i.stack.imgur.com/fs8Fp.jpg

As shown in the images above, the centre of the root symbol aligns with the underscore, whereas it should be positioned like this:

https://i.stack.imgur.com/lpWnf.jpg

Answer №1

If you need to replicate the height of certain characters, consider using \vphantom{...} in your equations.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML" async></script>


$$\sqrt{\vphantom{1}\class{mathjaxCursor}{\text{_}}}$$

You can also explore different alternatives by considering:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML" async></script>


$$\sqrt{\class{mathjaxCursor}{\text{_}}}$$

Answer №2

One workaround is to insert an additional character (such as a 1) after the underscore, with the same color as the background.

5\class{mathjaxCursor}{\text{_}}\class{white}{1}

To achieve this, use the following CSS:

.white
{
 color: white;
 font-size:xx-small;
}

This solution may result in a small gap to the right of the cursor, which is not ideal.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Angular bootstrap datetimepicker doesn't support disabling past dates

Has anyone successfully disabled past dates on an angular bootstrap datetimepicker before? I've tried using the date-disabled attribute, but I can't seem to get it to work. <datetimepicker class="calendar-format" data-ng-model ...

Having trouble getting background image transitions to work properly in CSS?

I'm encountering an issue with setting the transition CSS property for a hover effect, as it doesn't seem to be working correctly. Here is the relevant HTML: <div class = "menuItemBox" id = "Mughlai"> <p class = ...

What is the best way to choose all text within a code box without highlighting the entire webpage?

I developed a CSS code specifically for my blogspot site to organize and store all of my code and technical snippets. .code { background:#dae6ef; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color ...

A collapsible select list with checkboxes for children items

I am currently developing a website using Vue.js, HTML, and SCSS. I am looking to implement a drop-down functionality similar to the animated example provided in the gif below: https://i.stack.imgur.com/Mia2D.gif The gif demonstrates how the drop-down me ...

Enhancing user experience with CSS dropdown menu animations

I've been working on adding a dropdown transition to my menu, but I can't seem to get it right. Can anyone point out where I'm going wrong or what needs to be added for the transition effect on the dropdown menu? Here is the CSS and HTML cod ...

Setting a const value (true or false) based on the size of the window - a step-by-step guide

While studying, I encountered a challenge: In the code below, I need to dynamically set useState(false) based on the screen size. If the screen is larger than 947px, for instance, it should automatically be changed to true. The issue arises because sett ...

Tips for including space at the beginning and end of a dynamically created table cell

My table is dynamically generated with contents drawn from a database, creating rows based on the data. Each cell has a rounded border and 2px padding for consistency. I want all cells to appear evenly spaced and padded vertically, but I'm facing an ...

The footer navigation in CSS shifts position when it is hovered over

My attempt to add a <nav> at the footer was unsuccessful. The navigation bar in this fiddle is completely wrong as the entire nav moves when hovered, even though I did not include any animations. I want the items in the <nav> to stay fixed. ...

Steps to keep only one submenu open at a time and close others

Struggling to figure out how to open one submenu at a time, and I can't seem to locate the issue! I've searched around for solutions but haven't found anything that works for me. The submenu also needs to remain closed when the page loads. - ...

Use Javascript to set cookies and remember the show state when clicked

Can you offer some advice? I am looking to add cookies to my simple JavaScript code. Currently, the div is displayed when clicking on a link, but it hides again when the page reloads. I would like to implement cookies to remember the show state for 7 days. ...

Error message occurs when attempting to use the ->num_rows function on inner join statement and accessing a property of a non-object

I am attempting to fetch both Product_Name from the product table and Order_Date from the order table, but I keep encountering an issue at line 35 mentioning the "num_rows line". <?php $servername = "localhost"; $username='root'; $password = ...

Enhancing the functionality of a bootstrap button with the addition of an

My goal is to have a button that opens a URL in a new tab. I've managed to achieve this using window.location.href, but it doesn't open the URL in a new tab. The code I'm working with is written in jQuery and Javascript, and it's part ...

Ways to extract JSON data from multiple JSON arrays

Within the snippet below, I am attempting to extract the value of women. Right now, I can successfully retrieve 1. Personal care appliances and 2. Jewelry. However, if I try to check any checkbox after that, I encounter an error stating "Uncaught TypeError ...

The JavaScript code is not executing properly within the HTML document

I am trying to execute a function from my JavaScript file in my HTML page. Here is the code snippet: index.html <!DOCTYPE html> <html><body> <h2>Web1</h2> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jq ...

to return the value to default when deactivating the text input field

Implementing typeahead functionality on two input fields: <div class="form-group> <label class="control-label=">Product Code:</label> <input placeholder="Enter Value" type="text" class="form-control" ng-model="a.product ...

Navigating through each element of an array individually by using the onClick function in React

I'm currently working on a project that involves creating a button to cycle through different themes when pressed. The goal is for the button to display each theme in sequence and loop back to the beginning after reaching the last one. I've imple ...

show certain DIVs based on the URL

Is it possible to dynamically display different sections based on the URL? My event website has 3 subevents, and I'd like to show the date of each event in the navigation bar for their respective URLs. <div id="us" class="us-web-date">&nbs ...

Beneath the footer lies a blank space in white

Visit our site for information on various towns. However, we are facing an issue with the CSS when it comes to new or less populated towns like this one, where the footer is not aligning properly and leaving a large white gap below. We attempted to implem ...

Manipulating certain attributes of a CSS class for a specific division element

I'm working with a div that has a CSS class applied to it. The class declares the height as x pixels, but I actually want my div to be y pixels high. Is there a way to override the height parameter of the CSS without making changes to the CSS file? ...

What is the best way to ensure that my header remains responsive across all devices and screen sizes?

The header is not responding despite inputting width: 100%. How can I ensure that the header is responsive on all browsers, as well as iPads and phones? .head-wrap { background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/We-are-p ...