How to Apply Different Styles to Different Letters in Word

Style specific letters in a word

Currently there is no way to target n-th letter through CSS. There are some calls for CSS to allow n-th everything in the future, but as of today, no such luck.

Currently, you would probably have to use some JS approach to solve this.

Styling individual letters in word

Remember, CSS is Cascading. You can style the whole #namer element separately from the first letter - the more specific style will override the more general one.

#namer:first-letter {
color:#09C;
font-size:1.1em;
font-weight:bold;
}

#namer {
color:red;
}

Update:

Lettering.js allows for styling individual letters. See the comments below for additional information. The info above is for styling the initial character only, and was in answer to the OP's original question before it was edited to make it clearer.

how to set a style for single words in a word document

You're trying to apply a paragraph style.

These styles can only be applied to complete paragraphs.

If you apply a character style, it will work fine.

Inline custom styles in Microsoft Word

Ok, I just found out:

Select text > Format > Style > New

Then select "Character" instead of "Paragraph" for the option "Style type".

Blending mode for individual letters within a word in CSS

Actually you need some help from JS to achieve your goal exactly.
Please check this

const element = document.getElementsByClassName("blend");
let text = element[0].getAttribute("data");
let blendMode = element[0].getAttribute("blend-mode");
for(let chr of text)
element[0].innerHTML += "<span style='mix-blend-mode: "+blendMode+"' >"+chr+"</span>";
.blend-style {
letter-spacing: -35px;
font-size:180px;
font-weight:bold;
color:rgba(22, 160, 133, 1);
font-family:arial
}
<p class="blend blend-style" blend-mode="difference" data="BlendMe!"></p>

Different colors for alternate letters in a word

If you can use jQuery, you could use this code snippet:

$( "span" ).each(function( index ) {
var originalText = $( this ).text();
var newText = "";
for( var i = 0; i < originalText.length; i++)
{
if (i % 2 === 0)
newText += "<span>" + originalText.charAt(i) + "</span>";
else
newText += originalText.charAt(i);
}
$( this ).html(newText);
});

It replaces the wanted characters with a span inside the original span, and you can then style that span.

Fiddle: http://jsfiddle.net/m6RTW/



Related Topics



Leave a reply



Submit