Skip to main content
Rag and Bone
Community Expert
Rag and BoneCommunity Expert
Community Expert
October 21, 2024
Answered

How to center layered type?

  • October 21, 2024
  • 4 replies
  • 1251 views

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>
<meta charset="UTF-8">
<title>Layer test</title>
<link rel="stylesheet" type="text/css" href="/webfonts/besley_shaded-web/besley_shaded.css">
<style type="text/css">
.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>

 

    This topic has been closed for replies.
    Correct answer osgood_

    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    ;
    }

    4 replies

    L
    Community Expert
    L e n aCommunity Expert
    Community Expert
    October 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 ?

    Rag and Bone
    Community Expert
    Rag and BoneCommunity ExpertAuthor
    Community Expert
    October 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:

    <style type="text/css">
    .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>
    O
    osgood_Correct answer
    Legend
    October 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    ;
    }
    Rag and Bone
    Community Expert
    Rag and BoneCommunity ExpertAuthor
    Community Expert
    October 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.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 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
    O
    osgood_
    Legend
    October 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.

    Rag and Bone
    Community Expert
    Rag and BoneCommunity ExpertAuthor
    Community Expert
    October 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>
    <meta charset="UTF-8">
    <title>Layer test</title>
    <link rel="stylesheet" type="text/css" href="/webfonts/besley_shaded-web/besley_shaded.css">
    <style type="text/css">
    .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>
        <div class="centerwrap">
      <p class="shade2">Div wrapped</p>
        </div>
    </body>
    </html>

     

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      October 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
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      October 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
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      October 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
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices