My goal is to replace the display of _ by a blank space in my HTML document:
ex:
hello_world
should be
hello world
Possible Solutions:
Would be to create a
FONT that uses blank inside the _ character
Still looking for it!
Can this be done with CSS?
It is important that we do not modify the original string (we keep the _ character), but we simply display a blank space instead.
Regards
I think this is possible in CSS for a one-off kind of thing:
<span class="replace-me">hello_world</span>
.replace-me{
display:none;
}
.replace-me:after{
content:'hello world';
}
But I'm guessing that's not exactly what you want.
Otherwise, to replace all instances in JS:
document.body.innerHTML = document.body.innerHTML.replace('_', ' ');
You'll likely have to get a little more fancy with the regex but you could parse the page for underscores and wrap them in a <span>. Then use a pseudo element that has it's content set to a single space to replace the wrapped underscore.
<p>
Some_content with_underscores_going_on.
</p>
span:after {
font-size: 16px;
content: ' ';
}
span {
font-size: 0;
}
// jQuery
var f = $("body");
f.html( f.html().replace(/_/g,"<span>_</span>") );
jsFiddle: http://jsfiddle.net/h2h1bmyn/1/
Related
I need to be able to bold text in an element(it doesn't need to work with pre, but i'd prefer it would).
for example:
This is the string i wish to display.
is there an ability to do that purely in html and css with indexes if yes then how can i do that? or should i use something else?
Edit: The text is dynamic. where to bold will be specified with *
Long story short, from what I know there is no way with CSS only to select text by text. So you will need to use javascript to achieve what you are after.
You can use replace()
// check all elments with given class
[...document.querySelectorAll('.check-those-p-tags')].forEach(function(element){
// iterate over all elements
var resultString = element.innerHTML.replace(
/the/g, // search for all (g = global) "the" in the innerHTML
'<span class="alert">$&</span>' // replace/wrap the "the" with some tags and class
// "$&" means => Inserts the matched substring.
);
element.innerHTML = resultString; // overwrite the innerHTML with the new string
});
.alert { color: red; font-weight: bold; }
<p class="check-those-p-tags">This is the string i wish to display.</p>
You can also write it almost in one line
[...document.querySelectorAll('.check-those-p-tags')].forEach(function(element){
element.innerHTML = element.innerHTML.replace(/the/g, '<span class="alert">$&</span>');
});
.alert { color: red; font-weight: bold; }
<p class="check-those-p-tags">This is the string i wish to display.</p>
I have a variable that contains a string value in the form of some percentage eg. '10%' I want to use that value to build a class name to add to my html element if the percentage is anything above '0%'. I thought this would be easy using a sass loop but I can't seem to get the class name constructed correctly.
I thought it would look something like this.
#for $i from 1 through 100{
.highlight-#{$i}% {
// styling
}
}
.highlight-0% {
// styling
}
I have tried several variations:
.highlight-#{$i + '%'} { // styling }
.highlight-#{$i}${'%'} { // styling }
I don't know if this is even possible since '%' may be reserved.
I am adding the html just in case someone can suggest a way to remove the % in there. This is what I would like to be able to do:
<tr><td class="pad-10 highlight-${publisher.numViewsPercentage}" align="center">${publisher.numViewsPercentage}</td></tr>
Not only is % a reserved character in Sass, the bigger issue is it's not an allowed character in CSS selector names. So even if you could make Sass compile the resulting class names won't be valid and won't work.
For the most part selector names need to use only letters, numbers, underscore and hyphens.
.nopercent {
color: red;
}
.percent% {
color: red;
}
<div class="nopercent">
An element withOUT a percent sign in the class.
</div>
<div class="percent%">
An element with a percent sign in the class.
</div>
% is a placeholder character in SASS since version 3.2.
You should just use it for "invisible" extendeds.
I am trying to work with existing Google Script, and I'd like to change the color of some words within a sentence in an email the script generates. In the following, I would like "behind pace" to be red. I've tried font tags, but they don't work. Suggestions?
if (firstItem) {
body = "This is an email to inform you of course progress.\n\n" + studentName + " is <font color="red"> behind pace </font> in the following subjects:\n";
firstItem = false;
} else {
body += "\n";
}
The <span> tag is what you're looking for; there is no <font> tag in HTML (anymore...). The tag accepts a style attribute which uses CSS to describe the look of the span's content. (Learn a bit more about CSS here.)
if (firstItem) {
body = "This is an email to inform you of course progress.\n\n"
+ studentName
+ " is <span style='color:red;'>behind pace</span> in the following subjects:\n";
firstItem = false;
} else {
body += "\n";
}
Notes:
You must send this email using the htmlBody option.
GmailApp.sendEmail(recipient, subject, '', {htmlBody:body});
Gmail is one of many email clients that only supports in-line styles. See How do I use Google Apps Script to change a CSS page to one with inline styles?
Be careful with quotes when embedding strings within strings. In JavaScript, you need to pair up single (') and double quotes ("), but you can nest one within the other, or escape internal quotes ("string \"internal string\" end of string").
I'm assuming it's not possible, but just in case it is or someone has a nice trick up their sleeves, is there a way to target certain characters using CSS?
For example make all letters z in paragraphs red, or in my particular case set vertical-align:sup on all 7 in elements marked with the class chord.
Hi I know you said in CSS but as everybody told you, you can't, this is a javascript solution, just my 2 cents.
best...
JSFiddle
css
span.highlight{
background:#F60;
padding:5px;
display:inline-block;
color:#FFF;
}
p{
font-family:Verdana;
}
html
<p>
Let's go Zapata let's do it for the revolution, Zapatistas!!!
</p>
javascript
jQuery.fn.highlight = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
});
};
$("p").highlight("Z","highlight");
Result
That's not possible in CSS. Your only option would be first-letter and that's not going to cut it. Either use JavaScript or (as you stated in your comments), your server-side language.
The only way to do it in CSS is to wrap them in a span and give the span a class. Then target all spans with that class.
As far as I understand it only works with regular characters/letters. For example: what if we want to highlight all asterisk (\u002A) symbols on page. Tried
$("p").highlight("u\(u002A)","highlight");in js and inserted * in html but it did not worked.
In reply to #ncubica but too long for a comment, here's a version that doesn't use regular expressions and doesn't alter any DOM nodes other than Text nodes. Pardon my CoffeeScript.
# DOM Element.nodeType:
NodeType =
ELEMENT: 1
ATTRIBUTE: 2
TEXT: 3
COMMENT: 8
# Tags all instances of text `target` with <span class=$class>$target</span>
#
jQuery.fn.tag = (target, css_class)->
#contents().each (index)->
jthis = $ #
switch #.nodeType
when NodeType.ELEMENT
jthis.tag target, css_class
when NodeType.TEXT
text = jthis.text()
altered = text.replaceAll target, "<span class=\"#{css_class}\">$&</span>"
if altered isnt text
jthis.replaceWith altered
($ document).ready ->
($ 'div#page').tag '⚀', 'die'
Example code:
<p class="test">string</p>
I want to change the color on the last letter, in this case "g", but I need solution with css, I don't need a javascript solution.
I display the string letter by letter and i cant use static solution.
Everyone says it can't be done. I'm here to prove otherwise.
Yes, it can be done.
Okay, so it's a horrible hack, but it can be done.
We need to use two CSS features:
Firstly, CSS provides the ability to change the direction of the flow of the text. This is typically used for scripts like Arabic or Hebrew, but it actually works for any text. If we use it for English text, the letters are displayed in reverse order to how the appear in the markup. So to get the text to show as the word "String" on a reversed element, we would have to have markup that reads "gnirtS".
Secondly, CSS has the ::first-letter pseudo-element selector, which selects the first letter in the text. (other answers already established that this is available, but there's no equivalent ::last-letter selector)
Now, if we combine the ::first-letter with the reversed text, we can select the first letter of "gnirtS", but it'll look like we're selecting the last letter of "String".
So our CSS looks like this:
div {
unicode-bidi:bidi-override;
direction:rtl;
}
div::first-letter {
color: blue;
}
and HTML:
<div>gnirtS</div>
Yes, this does work -- you can see the working fiddle here: http://jsfiddle.net/gFcA9/
But as I say, it is a bit hacky. And who wants to spend their time writing everything backwards? Not really a practical solution, but it does answer the question.
Use ::after pseudo-element combined with attr() function:
p::after {
content: attr(data-end) ;
color: red ;
}
<p data-end="g">Strin</p>
p::after {
content: attr(data-end) ;
color: red ;
}
<p data-end="g">Strin</p>
Another solution is to use ::after
.test::after{
content: "g";
color: yellow;
}
<p class="test">strin</p>
This solution allows to change the color of all characters not only letters like the answer from Spudley that uses ::first-letter. See ::first-letter specification for more information. ::first-letter applies only on letters it ignores punctuation symbols.
Moreover if you want to color more than the last character you can :
.test::after{
content: "ing";
color: yellow;
}
<p class="test">str</p>
For more information on ::after check this link.
Without using javascript, your only option is:
<p class="test">strin<span class="other-color">g</span></p>
Edit for your fiddle link:
I'm not really sure why you said you didn't need a javascript solution, since you have quite a bit of it already. Regardless, in this example, you need to make only a couple small changes. Change line 10 from
elem.text(elem.text() + contentArray[current++]);
to
if ( current == contentArray.length-1 ) {
elem.html(elem.html() + "<span style='color:red'>"+contentArray[current++]+"</span>");
} else {
elem.html(elem.html() + contentArray[current++]);
}
Note that it's important to use .html() instead of .text() now, since there's actually HTML markup being inserted.
Working fiddle: http://jsfiddle.net/QTUsb/2/
It could be achieved using only CSS and an ::after pseudo-element without any changes in HTML:
.test {
font-size: 16pt;
position: relative;
}
.test::after {
bottom: 0;
color: red;
content: 'g';
position: absolute;
transform: translate(-100%, 0);
}
<p class="test">string</p>
In what way do you "display the string letter by letter"? If you're looping through the characters in a string (variable) you can certainly tell when you're at the last letter and wrap it in a whether doing so on the server side or client side.
Looking at the fiddles attached to another of your questions ...
If this is what you're talking about, you might have to set the .innerHTML of the element instead of the element.text()
From the fiddle at http://jsfiddle.net/SLKEn/ you would change it to something like this
if(current < contentArray.length) {
elem.html(
elem.html() +
(current == contentArray.length-1 ?
'<span class="lastchar">' + contentArray[current++] + '</span>' :
contentArray[current++])
);
}
along with CSS span.lastchar { color: red; }
Update: working fiddle based on your other question.
$(document).ready(function() {
var str=$("span").text();
strArr=str.split("");
for(var key=0;key<=strArr.length-1;key++) {
if(key==strArr.length-1) {
var newEle="<span id='lastElement'>"+strArr[key]+"</div>";
strArr[key]=newEle;
}
}
var newtext=strArr.join("");
$("span").html(newtext);
});
span#lastElement {
color: red;
}
i dont have the ability to comment on an answer thread but i wanted to point out an error in an answer provided by Marc_Alx that otherwise works wonderfully. that solution worked for me only after adding a semi-colon behind the content property... so it looks like content:"ing";
.test::after{
content:"ing";
color:yellow;
}
<p class="test">str</p>