Question 222308 in Html Question posted in
Some basic documentation can be found here.

How to achieve automatically-centered overstruck characters in html/css?

I need to do overstruck characters for things that Unicode can’t represent (like p overst. with w)
I generally do this:

<span style="letter-spacing:-Xpt">pw</span>&nbsp;

But when you manually adjust the letter-spacing value over and over again for different characters, it gets pretty tedious.
Is there any way to automatically adjust the second character to be over the first character, in the center, every single time?
And no, I can’t use a monospace font.

Tags:

4

Answers


  1. 0

    The best I could come up with is this:

    div {
  font-size: 60px;
}

.overstrike {
  letter-spacing: -1ch;
}

.overstrike::after {
  display: inline-block;
  content: ' ';
  width: 1ch;
}
    <div>this <span class="overstrike">iw</span>s a te<span class="overstrike">ds</span>t text</div>

    I use some special features of CSS like the ch unit and ::after.

    Note that the order of overwriting is important: The widest letter should be the second character in the span.

    Login or Signup to reply.
  2. 0

    First, look up your character on Unicode Plus. If you can’t find that character, it means it’s not included in Unicode.

    Then, if there’s no Unicode character you need, try to find a SVG of the character somewhere on internet. You can then use the SVG in your HTML document:

    <img src="./path/to/image.svg" alt="put a simlar unicode character here" />
    Login or Signup to reply.
  3. 0

    To achieve automatically-centered overstruck characters in HTML/CSS without using a monospace font, you can utilize CSS pseudo-elements to handle the positioning. By using the :before pseudo-element, you can place the second character over the first one and then apply position: relative to the parent element to ensure proper positioning. Here’s how you can do it:

    <div class="overstrike">pw</div>

    To use this method, set the second character as the data-second-char attribute for the .overstrike element dynamically. You can achieve this using JavaScript or a server-side script if you’re generating content dynamically. For example, in JavaScript:

        <div class="overstrike" data-second-char="w">p</div>
    
    
    .overstrike {
      position: relative;
    }
    
    .overstrike:before {
      content: attr(data-second-char);
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      letter-spacing: -Xpt; /* Adjust this value to control the distance between characters */
    }
    Login or Signup to reply.
  4. 0

    For this method you need to know in advance which is the wider of the two characters.

    Put that character into a span.

    Then put the other character as content of the before pseudo element, by picking it up from an attribute in the span, positioned absolutely relative to its owner span and centered using left 50% and then wiggling it back by half its own width using translate.

    That way you don’t need to know the relative widths of individual characters in advance.

    .doubleup{
  position: relative;
  
}

.doubleup::before {
  position: absolute;
  content: attr(otherch);
  left: 50%;
  transform: translateX(-50%);
}
    <div><span class="doubleup" otherch="p" >w</span></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search