Layout shift on Hover when Text is Made Bold

Contributor ,
Sep 12, 2021 Sep 12, 2021

Copy link to clipboard

Copied

Hello

See link below for example.

Move curser over the hyperlinks to see the layout shift over.
I would like to change the font in a hyperlink when you hover the curser over the text. You can see the layout shift when this happens.
If you remove the font-family: 'Georgia' then the layout does not shift.
I am using a fake bold using the text-shadow: property.
If I do not use it then the layout shifts as well.

 

Questions: Is there a better way then using the fake text shadow to create bold text when the curser hovers over the text and also can I change the font without the layout shifting over?
http://davidswebsite.com/test/Layout_shift.html

Views

266

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Sep 12, 2021 Sep 12, 2021

Change this:

<style>
a:link {color: #000000; text-decoration: underline; font-family: 'Georgia'; }       /* black */
a:active {color: #ff0000; text-decoration: underline; }     /* red */
a:visited {color: #0080ff; text-decoration: underline; }    /* blue */

a:hover { color: #ff0000;   /* red */
text-decoration: none;
background-color: white; }
/* red text, white background on mouse hover*/  
</style>

 

To this:

<style>
a {color: #000; font-family: "Georgia", "Times New Roman", serif;}

a:visite
...

Likes

Translate

Translate
LEGEND ,
Sep 12, 2021 Sep 12, 2021

Copy link to clipboard

Copied

My advice would be to stick with the same font/weight and you won't encounter the movement. Most fonts will have different spacing/cuts and weights, so wont occupy the same physical space, causing small variations when 'replaced' with a different font/weight.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 12, 2021 Sep 12, 2021

Copy link to clipboard

Copied

Change this:

<style>
a:link {color: #000000; text-decoration: underline; font-family: 'Georgia'; }       /* black */
a:active {color: #ff0000; text-decoration: underline; }     /* red */
a:visited {color: #0080ff; text-decoration: underline; }    /* blue */

a:hover { color: #ff0000;   /* red */
text-decoration: none;
background-color: white; }
/* red text, white background on mouse hover*/  
</style>

 

To this:

<style>
a {color: #000; font-family: "Georgia", "Times New Roman", serif;}

a:visited {color: #0080ff;}

a:hover, a:active, a:focus {
color: #ff0000; 
background-color: #FFF;
text-decoration:none;
}
</style>

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 12, 2021 Sep 12, 2021

Copy link to clipboard

Copied

Thanks for the tip. I had looked and looked from searches on the internet and there were several suggestions and none were your answer.

I was giving up and was just going to remove the fake bold text shadow property and add the font Georgia to help indicate the hyperlink. If I wanted it bold it, it does shift the layout but using Georgia font makes it appear bold compared to the Roboto font or Open sans fonts I use so no need to.

 

Your answer is much much better. Thanks again.

Test page:  http://davidswebsite.com/test/Layout_shift.html

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 13, 2021 Sep 13, 2021

Copy link to clipboard

Copied

LATEST
 

Adding any variation to the font which affects the width, like bold, italic, a different font will cause a 'page shift' as the result will be the font will occupy more or less room, so best to just highlight the text in a different color or add/remove the underline to give it distinction.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines