Center a sans-serif font vertically with exact precision while adjusting the font size

Question

Center a sans-serif font vertically with exact precision while adjusting the font size

My issue is an expansion of a previous problem I mentioned in another question, which can be found here Vertically align sans-serif font precisely using jquery/css.

To summarize: I am aiming to align two divs containing text, with one positioned above the other, so that the beginning of the letter A (specifically the lower left point) always aligns with the vertical line of H. Here's an example of what I'm trying to achieve:

The top div has a variable font-size and I want the bottom div to adjust its alignment according to that font size. This adjustment is necessary as I scale my font size based on the window's dimensions.

Check out this demo on jsfiddle.

HTML

<div id="Hideheader" class="Header" style="position: absolute;font-size:40pt;padding:0px;visibility: hidden;width:auto;height:auto;">HEADER</div>
<div id="header" class="Header">HEADER</div>
<div id="menubar" class="menubar">
    <div class="menubutton_left"><a href="#" id="WorkButton">A</a>
    </div>
    <div class="menubutton_middle"><a href="#" id="AboutButton">B</a>
    </div>
    <div class="menubutton_right"><a href="#" id="ContactButton">C</a>
    </div>  <span class="stretch"></span>

</div>

CSS

div.Header {
    font-family:sans-serif;
    text-align:justify;
    white-space: nowrap;
}
div.menubar {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    margin-bottom: 0px;
    position: relative;
}
div.menubutton_left, div.menubutton_middle, div.menubutton_right {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width:60px;
}
div.menubutton_left {
    margin-left:12px;
}
div.menubutton_middle {
    text-align: center;
}
div.menubutton_right {
    text-align: right;
}
.stretch {
    border: 2px dashed #444;
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

JAVASCRIPT

resizeHead("#Hideheader", "#header");

$(window).resize(function() {
  resizeHead("#Hideheader", "#header");
});

function resizeHead(p1, p2) {
    var fontsize = parseFloat($(p1).css("font-size"));
    var spacing = parseFloat($(p1).css("letter-spacing"));
    var initWidth = $(p1).width();
    initWidth = initWidth - spacing;
    var outWidth = $(p2).width();

    var s = outWidth / initWidth;
    s = fontsize * s;
    $(p2).css({
        "font-size": s
    });
}

Test resizing your browser window. The alignment issues become more evident at smaller font sizes.

javascript jquery html css fonts

Answer 1

Answer №1

It's possible that I may not fully grasp your query.. However, after reviewing your fiddle, it seems I understand what you're aiming for. Here are some suggestions:

1: Avoid using JavaScript to adjust font sizes. Consider utilizing relative units such as vw, vh, or vmin. These units adjust their size based on the parent container, like so: font-size: 20vw.

This method is much lighter compared to using JavaScript for every window resize event.

2: You've specified a fixed width for your divs, causing layout issues when they shrink below 60px. Remove this fixed width and opt for dynamically calculated widths using calc(100% / 3), ensuring all three divs are correctly positioned.

3: The margin-left on your first div disrupts the layout. Instead, add the margin to the <a> tag within the div:

div.menubutton_left a {
    margin-left:12px;
}

For an updated fiddle incorporating these changes (without any JavaScript), check out the link here: http://jsfiddle.net/ksuTQ/7/

Answer 2

It's possible that I may not fully grasp your query.. However, after reviewing your fiddle, it seems I understand what you're aiming for. Here are some suggestions:

1: Avoid using JavaScript to adjust font sizes. Consider utilizing relative units such as vw, vh, or vmin. These units adjust their size based on the parent container, like so: font-size: 20vw.

This method is much lighter compared to using JavaScript for every window resize event.

2: You've specified a fixed width for your divs, causing layout issues when they shrink below 60px. Remove this fixed width and opt for dynamically calculated widths using calc(100% / 3), ensuring all three divs are correctly positioned.

3: The margin-left on your first div disrupts the layout. Instead, add the margin to the <a> tag within the div:

div.menubutton_left a {
    margin-left:12px;
}

For an updated fiddle incorporating these changes (without any JavaScript), check out the link here: http://jsfiddle.net/ksuTQ/7/

Answer 3

Answer №2

I've encountered a similar issue with my applications in the past, and while I admit my solutions were not always elegant, they did get the job done. @LcSalazar's post is definitely worth checking out, although I have faced challenges in configuring the rest of my page after using elements with relative positioning. However, it seems like you are already going down that path. Start by trying @LcSalazar's suggestion first, and if you're feeling adventurous, give my solution a shot. Consider experimenting with elements like span instead of div, but be aware that this may impact your project significantly.

The main obstacle lies in HTML's limited capability to gather TextMetrics, which is essentially what you're seeking. While canvas elements offer TextMetrics providing width information, obtaining height data proves to be more challenging.

var myCanvas = document.createElement('canvas');
var myContext = myCanvas.getContext('2d');

var myText = "I'm exploring canvas for text measurements!";

var textMetrics = myContext.measureText(myText);

var textWidth = textMetrics.width;

Unfortunately, determining height remains elusive within HTML. Here's an approach I've utilized in the past:

var hiddenDiv =  document.createElement('div');
hiddenDiv.style.visibility = 'hidden';
hiddenDiv.style.position = 'absolute';
hiddenDiv.style.top = '0px';
hiddenDiv.style.left = '0px';
document.body.appendChild(hiddenDiv);

var myText = "Measuring text through a discreet div";

function getTextHeight(text, font)
{
   hiddenDiv.style.font = font;
   hiddenDiv.innerHTML = text;

   return hiddenDiv.clientHeight;
}

var myFont = 'normal 13px Verdana';

var textHeight = getTextHeight(myText, myFont);

You can leverage the obtained text height for resizing or aligning purposes as needed. I chose not to integrate it directly into your project, aiming instead to present a simplified method for acquiring text height without extensive coding. Always remember to define the div's font before measuring it! Hopefully, this provides some assistance!

Answer 4

I've encountered a similar issue with my applications in the past, and while I admit my solutions were not always elegant, they did get the job done. @LcSalazar's post is definitely worth checking out, although I have faced challenges in configuring the rest of my page after using elements with relative positioning. However, it seems like you are already going down that path. Start by trying @LcSalazar's suggestion first, and if you're feeling adventurous, give my solution a shot. Consider experimenting with elements like span instead of div, but be aware that this may impact your project significantly.

The main obstacle lies in HTML's limited capability to gather TextMetrics, which is essentially what you're seeking. While canvas elements offer TextMetrics providing width information, obtaining height data proves to be more challenging.

var myCanvas = document.createElement('canvas');
var myContext = myCanvas.getContext('2d');

var myText = "I'm exploring canvas for text measurements!";

var textMetrics = myContext.measureText(myText);

var textWidth = textMetrics.width;

Unfortunately, determining height remains elusive within HTML. Here's an approach I've utilized in the past:

var hiddenDiv =  document.createElement('div');
hiddenDiv.style.visibility = 'hidden';
hiddenDiv.style.position = 'absolute';
hiddenDiv.style.top = '0px';
hiddenDiv.style.left = '0px';
document.body.appendChild(hiddenDiv);

var myText = "Measuring text through a discreet div";

function getTextHeight(text, font)
{
   hiddenDiv.style.font = font;
   hiddenDiv.innerHTML = text;

   return hiddenDiv.clientHeight;
}

var myFont = 'normal 13px Verdana';

var textHeight = getTextHeight(myText, myFont);

You can leverage the obtained text height for resizing or aligning purposes as needed. I chose not to integrate it directly into your project, aiming instead to present a simplified method for acquiring text height without extensive coding. Always remember to define the div's font before measuring it! Hopefully, this provides some assistance!

Center a sans-serif font vertically with exact precision while adjusting the font size

Answer №1

Answer №2

Similar questions

The function you are trying to access does not exist in this.props

Parameterized Azure Cosmos DB Stored Procedure

Prevent Text Overflow in CSS, Material-UI, and React styling efforts

The installation of the material ui package was unsuccessful

What are the steps to incorporate @svgr/webpack into turbopack within a next.js project?

`Display communications using JQuery and C#`

Every time a button is clicked on the interface, a new element or button will appear. This functionality is made possible through

Exploring the Ins and Outs of Debugging JavaScript in Visual Studio Using

Error: The Node Express Server is unable to locate the requested resource at "/

Eliminating an element from an array based on a single criterion

Jasmine - What is the best way to simulate a finally block?

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

Apache causes HTML download tag to malfunction

A guide to testing window.pageYoffset in webdriverIO using chai assertions

Component fails to re-render after token refresh on subsequent requests

tips on setting the time format in dimple.js

Exploring the Power of JQuery with Hover Effects and SlideToggle

Once the form has been loaded without any information, go ahead and submit

The background gently fades away, directing all attention to the popup form/element

Is it limited to using url routes for clients to communicate with servers in a node.js web application?