How to display accents over words with different colors in HTML / CSS?

Question

I have some text that displays in HTML:

pīng​pāng​qiú​pāi

How to change the color of the text so that the text is blue and the accents are higher than red?

Answer 1

CSS considers the letter as a whole, and therefore it can be only one color.

Here is the hacker version:

This will only work if the content remains the same.

span{
  font-size:48px;
  color:blue;
  position:relative;
}
span:after{
  content:'pīng​pāng​qiú​pāi';
  position:absolute;
  left:0;
  height:18px;
  overflow:hidden;
  z-index:9999;
  color:red;
  top:-5px;
}

<span>pīng​pāng​qiú​pāi</span>

Run code

Personally, I would not use it. This is a terrible way to do it.

Answer 2

, , CSS. BeatAlex, script, . , 2 , , BeatAlex - - . . , overflow:hidden, , . script ( ). , ( ), span, span. , , / , , , . :

CSS

.distinct-accent {
  font-size:30px;
  color:blue;
}
.with-accent {
  position:relative;     
  display:inline-block;    
}
.with-accent:before {
  content:attr(data-content);
  position:absolute;
  left:0;
  top:0;
  height:0.4em;
  width:100%;
  padding-right:0.1em;
  color:red;
  overflow:hidden;      
}    

JS

$(".distinct-accent").html(function(i, oldhtml){
   var newhtml = "";
   for(var i = 0; i < oldhtml.length; i++){
     var nextChar = "";
     var code = oldhtml.charCodeAt(i);
     if((code > 64 && code < 90) ||
        (code > 96 && code < 123) || code == 32) nextChar = oldhtml[i];
     else {
        nextChar = "<span class='with-accent' data-content='" + oldhtml[i] + "'>" + oldhtml[i] + "</span>";
     }
     newhtml += nextChar;
   }
   return newhtml;
});

-

: . webkit (, Chrome), (content:attr innerHtml). - ( ) Chrome, . , HTML ).

, ( , CSS ). .

script:

.each(function(){
   $(this).replaceWith($(this).clone(true));
});

Answer 3

, , , .

, ( ) text-shadow , , , .

. / .

, , "", .

:

1. i U + 0131 LATIN SMALL LETTER DOTLESS I (. "Spinal Tap")

2. , . , , i ï (. ).

3. , ç. text-shadow.

4. text-shadow . , .

In the next snippet, I also use custom CSS properties (also called CSS variables) to avoid repeating the background color inside text-shadow, and when you hover over it, you can see what happens when it text-shadowis deleted.

:root {
  --body-bg: white;
}

body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-size: 30px;
  flex-direction: column;
  background: var(--body-bg);
}

.setting {
  font-size: 14px;
  display: flex;
  align-items: baseline;
}

body>* {
  padding: 10px;
}

[data-with-diacritics] {
  display: inline-block;
  position: relative;
  text-shadow: -1px -1px 0px var(--body-bg), 1px -1px 0px var(--body-bg), -1px 1px 0px var(--body-bg), 1px 1px 0px var(--body-bg);
}

[data-with-diacritics]::before {
  content: attr(data-with-diacritics);
  position: absolute;
  color: red;
}

[data-with-diacritics]>span {
  position: relative;
}

[data-with-diacritics]:hover {
  text-shadow: none;
  outline: 1px solid red;
}

<span data-with-diacritics="Spın̈al Tap">
  <span>Spınal Tap</span>
</span>

<span data-with-diacritics="España">
  <span>Espana</span>
</span>

<span data-with-diacritics="Français">
  <span>Francais</span>
</span>

<span data-with-diacritics="äëïiöü ãõ">
  <span>aeııou ao</span>
</span>

Run code