How to center layered type?

Report · Oct 21, 2024

I'm trying to use a layered font using CSS ":after" on a class to load the shadow version of the font. The css for the font uses weight to call the different font layers.

Everything works as expected until I try to center the text, and then the layers don't align. Any tips, alternate approaches?

My test page is here.

The code for the page:

<!doctype html>

<html>

<head>

<title>Layer test</title>

.shade{

position: relative;

font-size: 8em;

font-family: 'Besley Shaded Web';

color: #595774;

font-weight: 400;

}

.shade:after{

position: absolute;

top: 0;

left:0;

content:"Story Time";

color: #F2B035;

font-weight: 500;

}

.shade2{

position: relative;

text-align: center;

font-size: 8em;

font-family: 'Besley Shaded Web';

color: #595774;

font-weight: 400;

}

.shade2:after{

position: absolute;

top: 0;

left: 0;

content:"Story Time";

color: #F2B035;

font-weight: 500;

}

</style>

</head>

<body>

<h1>Left align layers as hoped,

Center align not at all! </h1>

<p class="shade">Story Time</p>

<p class="shade2">Story Time</p>

</body>

</html>

Report · Oct 21, 2024

body {text-align:center;}

Positioning removes elements from the normal document flow and should not be used in primary layouts.

The same code without positioning results in text-aligned center as shown.

PS. Obviously, I don't have access to your custom font.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 21, 2024

Alternate approach with CSS Text-Shadows:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text-Shadow Demo</title>
<style>
div {
font-size: 8rem;
text-align: center;
color: antiquewhite;
background: white;
font-family: "Times New Roman", Times, serif;
font-weight: 700;
text-shadow: 5px 5px 0px #eb452b, 
             10px 10px 0px #efa032, 
             15px 15px 0px #46b59b, 
             20px 20px 0px #017e7f, 
             25px 25px 0px #052939, 
             30px 30px 0px blue, 
             35px 35px 0px violet, 
             40px 40px 0px black;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut earum autem ab aliquam, dolorum enim quae minus ducimus consequuntur velit nesciunt, voluptate dicta quasi? Aut eaque, error! Inventore voluptatum, dolore.</p>
</div>
</body>
</html>

Have fun!

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 21, 2024

Why dont you use the text-shadow css property or is the shadow version of the font you are using doing something that that css property can't solve.

Failing that the option would be to try wrapping a relatively positioned div around both the p tags, then position those p tags absolutely in relation to their parent relatively positioned div. You can center the div and the absolutely positioned elements inside it should come along for the ride too.

Report · Oct 21, 2024

osgood:

I tried the div wrap. The text inside the centerwrap div layers correctly, but doesn't center. Quite possibly I've missed something 😞

Here's the new code:

<!doctype html>

<html>

<head>

<title>Layer test</title>

.centerwrap{

align-content: center;

text-align: center;

}

.shade{

position: relative;

font-size: 8em;

font-family: 'Besley Shaded Web';

color: #595774;

font-weight: 400;

}

.shade:after{

position: absolute;

top: 0;

left:0;

content:"Story Time";

color: #F2B035;

font-weight: 500;

}

.shade2{

position: absolute;

font-size: 8em;

font-family: 'Besley Shaded Web';

color: #595774;

font-weight: 400;

}

.shade2:after{

position: absolute;

top: 0;

left: 0;

content:"Div wrapped";

color: #F2B035;

font-weight: 500;

}

</style>

</head>

<body>

<h1>Left align layers as hoped,

Center align not at all! </h1>

<p class="shade">Story Time</p>

<p class="shade2">Div wrapped</p>

</div>

</body>

</html>

Report · Oct 21, 2024

Even if you achieve what appears to be pixel-perfect-precision of layers on your device, there's no guarantee this will hold up on other devices.

Users have displays of varying sizes, settings & pixel-densities. There's not much web designers can do about that.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 21, 2024

Thanks Nancy.

The fonts were designed for this use, and they work as intended when left jsutified, so I''m thinking there should be a way to center them. (Maybe I'm just being a dog with a bone.) I think I'll get in touch with the font's foundry. They work on their site!

Report · Oct 21, 2024

They might be using Clipping Paths & Masks with their fonts.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 21, 2024

Thanks for that link, Nancy.

Report · Oct 21, 2024

Thanks Nancy and osgood.

The custion font is deigned with shadow outlines, not "mechanicals", so, well, it looks better. That's why I'm not using the text-shadow.

Nancy: I guess I don't understand your instructions. If I remove the positioning, the two fonts just appear one after the other, not layered. That's what I see in your screen shot as well. Just to be clear, the desired effect is displayed on the left aligned text.

osgood:

I'll give the wrap around divs a try.

Report · Oct 21, 2024

Decide what's important. Define your project's primary objectives.

If the font isn't right, change it. If the method isn't right, change it.

You have lots of options in web design.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 22, 2024

Hello @Rag and Bone , I didn't explore your second approach in detail... I just got stuck on the first one, https://demo.puce-et-media.com/rag-and-bone/index-1.html

So, if you want to stick with this approach, the problem is that when you center the text with text-align: center, it only affects the paragraph text itself and not the element created with ::after, which is absolutely positioned.

In the centered version, the ::after element has left: 0, which sticks the shadow to the left, even when the main text is centered. The offset applied to the shadow is the same in both versions, but it doesn’t consider the centered text in .shade2, making a visual mismatch between text and shadow.

The absolute positioning of ::after should consider not just the position of the main element, but also its alignment. With left: 0, the shadow goes to the left side of the parent, and it makes the offset wrong when text is centered.

To fix this and center the ::after element under the main text, you should use left: 50% to put the shadow in the middle of the parent. But, it needs also another adjustment with transform: translateX(-50%) to fix the width and make it perfectly centered below the text. https://demo.puce-et-media.com/rag-and-bone/index-2.html

To keep the offset the same in both centered and left-aligned versions, it is interesting to add an additional offset with transform: translate(5px, 5px), moving the shadow evenly in both directions.

In the end, this makes sure the shadow is well-centered under the text in both cases (left aligned and centered), and the visual offset stays the same. Using transform gives consistent results in both versions and should adapt to every platform.

Does this help you ?

Report · Oct 22, 2024

Thank you very much Lena for your detailed assistance. I'll have a look at all that, which looks like a robust solution. (By the way, I like the font choice!)

In the meantime, someone on another forum suggested I try adding width: 100% to the :after pseudo class, and that does seem to allow me to center the text as I hoped, and seems to be effective on various screen sizes.

I've posted the revised page at the same address.

Here's the css that seems to work:

.centerwrap{

align-content: center;

text-align: center;

}

.shade{

position: relative;

font-size: 8em;

font-family: 'Besley Shaded Web';

color: #595774;

font-weight: 400;

}

.shade:after{

position: absolute;

top: 0;

left:0;

content:"Story Time";

color: #F2B035;

font-weight: 500;

width: 100%;

}

</style>

Report · Oct 22, 2024

All you need do to center the text is amend your css:

.centerwrap {
display: grid;
place-content: center;
background-color: #f2f2f2;
}

OR remove the 'centerwrap' div and add:

display: grid;

place-content-center;

to your classes, see below in bold:

.shade{
position: relative;
font-size: 8em;
font-family: 'Besley Shaded Web';
color: #595774;
font-weight: 400;
display: grid;
place-content: center;
}

.shade:after{
position: absolute;
top: 0;
left:0;
content:"Story Time";
color: #F2B035;
font-weight: 500;
width: 100%;
display: grid;
place-content: center;
}

Report · Oct 22, 2024

Thank you, osgood. I wasn't familiar with :grid and place-content.

My knowledge of CSS is rudimentary, if you hadn't guessed.

Both those approaches work a treat!

How to center layered type?

1 Correct answer