Having enough people writing in upper case, I inserted the syntax text-transform: lowercase; or the text to be written in lower case and syntax ::first-letter for a capital is created after the beginning of each sentence after the point.
text-transform: lowercase; works fine but for ::first-letter he created me a capital letter at the beginning of the sentence but not after!
Is it possible to create CSS capitalized after a point?
Keep all data into a variable and split it with the point you want. Then display all array inside paragraph. This might be working.
var str = "What ever you want to do. Please do it here.";
var res = str.split(".");
then use for loop and getElementbyId to replace the content
Try this:
str = 'ABC. DEF. XYZ';
str2 = str.toLowerCase();
str3 = str2.replace(/\. /g, '.</span> <span class = caps>')
$('#output').html('<span class = caps>' + str3)
.caps {
display: inline-block;
}
.caps::first-letter {
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
Convert the entire string to lower case; then replace the . with span elements; apply CSS rules to the span elements so that they are block level, inline and first letter capitalised); and just to tidy up, add an opening <span> before the replacement string to match the closing tag at the end of the first sentence.
<html>
<head>
<style>
p::first-letter {
font-weight: bold;
color: red;
}
</style>
<script>
function myFunction() {
var str = document.getElementById('data').innerHTML;
var res = str.split(".");
var data = "";
for(i=0; i<(res.length-1); i++){
var data = data + "<p>"+res[i]+".</p>";
}
document.getElementById("data").innerHTML = data;
}
</script>
</head>
<body onload="myFunction()">
<div id="data">What ever you want to do. Please do it here.</div>
</body>
</html>
This will automatically change the data onload.
Have more questions leave me a message in grandamour
Related
I am using SwiftSoup library to parse a dynamically created HTML string in swift...
let doc = try SwiftSoup.parse(htmlString)
And let's say I have this result
<html>
<head>
<style>
myClass {
font-size: 14px;
color: #000;
}
</style>
</head>
<body>
<span class="myClass">Hello World</span>
</body>
</html>
Now I can get the class value of my span like this
let span = try doc.select("body span")
let myClass = try span.attr("class")
Please is there a way I can iterate through the CSS attributes of myClass and get the attributes and their values.
Something like this:
var cssStyle = ""
let myClassAttrs = // a dictionary containing all myClass attributes(as dictionary keys) and values
for attr, value in myClassAttrs {
cssStyle += "\(attr): \(value);"
}
I have a HTML document that looks like the following, and using only CSS I want to insert an asterisk before each line. For the first line, the following works:
p:before {
content: "*";
}
<p>
test
<br> test2
<br> test3
</p>
but I don't know how to add the asterisk before each subsequent line.
I've tried:
p:before {
content: "*";
}
p>br:after {
content: "*";
}
<p>
test
<br> test2
<br> test3
</p>
but it doesn't seem to work.
How can I accomplish this?
codepen: https://codepen.io/ds241/pen/QWQyPKY
So, you select this div with class quote, extract its innerHTML, and convert it to a string with the toString() method. You then split this string with <br> separater, which results in an array. You then map this array to include a * before the start of each new line word.
Finally, you join this array together using the same <br> separator, and set the innerHTML of your quote to this. The code ends up looking like this.
const quote = document.querySelector(".quote");
let innerHTML = quote.innerHTML;
const t = innerHTML.toString();
let s = t.split("<br>");
s = s.map((i) => {
return `*${i}`;
});
s = s.join("<br>");
quote.innerHTML = s;
Two ways to Make a Line Break with Unicode
First assign the following CSS:
Figure I
p {
white-space: pre;
}
The above applies to both techniques. The first way is to use
in HTML.
Figure II
<p>test1
test2
test3
</p>
The second way is to use ::before, content, and \00000a.
Figure III
p::before {
content: "\00002a test1\00000a \00002a test2\00000a \00002a test3\00000a";
}
p {
white-space: pre
}
.a::before {
content: "\00002a test1\00000a \00002a test2\00000a \00002a test3\00000a";
}
<p class='a'></p>
<p>
*test4
*test5
*test6
</p>
This is because all your content is inside one element. And with the pseudo-selector, you can only target the element, not its content.
let p = document.querySelector('p');
let res = document.querySelector('.res');
res.innerText = p.innerText;
<p>
test
<br> test2
<br> test3
</p>
<div class="res"></div>
You'll need to wrap each of the lines of text. Depending on how you're implementing you can accomplish this in many ways. You could wrap them in individual tags, or tags, or if it's a list consider and tags. This will allow you to apply the CSS to each line.
p:before {
content: "*";
}
p>br:after {
content: "*";
}
<p>test</p>
<p>test2</p>
<p>test3</p>
You are missing one more ‘:’
So the css for this p would be something like:
p::before {
content: "*";
}
p:before {
content: "*";
}
Is it possible to fake lowercase letters on a font that has only one letter type, which is ALL CAPS?
This is a sentence on Stack Overflow.
Looks like this when the font is applied:
THIS IS A SENTENCE ON STACK OVERFLOW.
I want the capitals to be a slightly larger font size as in the example below. But without the additional HTML markup.
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
span {
font-size: 1.4em;
}
<span>T</span>HIS IS A SENTENCE ON <span>S</span>TACK <span>O</span>VERFLOW
I'd say the best way to achieve this is with JavaScript (so you could keep the markup dynamic). The JS part that you'd need is this (remember to add .small-caps class to your text elements):
function smallCaps() {
var elements = document.querySelectorAll('.small-caps')
Array.prototype.forEach.call(elements, function(e) {
var text = e.innerHTML.toUpperCase()
e.innerHTML = text.replace(/\b([A-Za-z0-9])/g, '<span class="caps">$1</span>')
})
}
And also remember to add styles for the .caps class:
.caps {
font-size: 1.4em;
}
See it in action either in a fiddle or below:
smallCaps()
// This is what you need:
function smallCaps() {
var elements = document.querySelectorAll('.small-caps')
Array.prototype.forEach.call(elements, function(e) {
var text = e.innerHTML.toUpperCase()
e.innerHTML = text.replace(/\b([A-Za-z0-9])/g, '<span class="caps">$1</span>')
})
}
.caps {
font-size: 1.4em;
}
<h1 class="small-caps">HELLO WORLD</h1>
<h2 class="small-caps">Nifty FOOBAR title</h2>
Sentence case in font-variant: small-caps. The titleCase() function works perfectly with the letters wrapped in <span>s.
I want the capitals to be a slightly larger font size as in the example below. But without the additional HTML markup.
The first 4 comments on OP are correct. I'd like to reaffirm #Pete's comment:
css can only target the first letter or word in a sentence, other than that you will need extra html otherwise how would css know you want the first letter and then the s of stack and o of overflow?
Thus, you will get answers of every variety and each successful answer will have markup in some form or another. With JavaScript, you could have a range determined by a whitelist/dictionary but covering any range of proper nouns would be very limited. Capabilities of that magnitude should be possible with a language like Python, Java, C/C++, etc.
Demo
var main = document.body;
var text = main.textContent;
titleCase(text);
main.style.fontVariant = 'smallCaps';
function titleCase(str) {
return str.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
span {
font-size: 1.4em;
}
<span>T</span>HIS IS A SENTENCE ON <span>S</span>TACK <span>O</span>VERFLOW
I inherited code that layers up a font heading - multiple divs draw the font - like this:
<div class = 'stage'>
<div class = 'layer'></div>
<div class = 'layer'></div>
<div class = 'layer'></div>
<div class = 'layer'></div>
</div>
The text itself is defined in the css under "layer.after" as "content: "xyz!"".
My aim is to style the "!" in "XYZ" in a different font... if the content was in the HTML section I could just add a span.
But here, my text is defined in Content in css.... How can I style the last letter differently than the rest in this type of setup, or add a span to the css, or even a short script to change the last letter (!) to a different font? I've tried last letter selector to no avail.
Using pseudoclasses on pseudoelements is not allowed. Therefore what you want is not possible without changing existing code.
Is there some actual text in HTML? If not you can use ::before for your text and ::after for "!" - JSFiddle
CSS
.layer::before {
content: 'xyz';
color: blue;
font-weight: bold;
}
.layer::after {
content: '!';
color: red;
font-weight: bold;
}
You'll need to use some script if changing the markup is not an option.
If you have jQuery available, try something like this:
$(function() {
$(".stage .layer").each(function() {
var content = $(this).html();
content = content.substr(0, content.length - 1)
+ "<span>"
+ content.substr(-1)
+ "</span>";
$(this).html(content);
});
})
See http://codepen.io/ondrakoupil/pen/VLBoXR for live example.
First lowercase the text then capitalize it. Is it possible with CSS?
Edit: Example:
HELLO WORLD -> Hello World
Edit2: I have a list of countries which are all uppercase, like UNITED KINGDOM, I have to make it look like United Kingdom.
Yep:
.className {
text-transform:capitalize;
}
Javascript:
function capitalize(s){
return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};
capitalize('this IS THE wOrst string eVeR');
Stolen from here:
Capitalize words in string
This can be done if the text inside the element is only on one line, using the ::first-line pseudo-element:
<h3>HELLO WORLD</h3>
<style>
h3 {
text-transform: lowercase;
}
h3::first-line {
text-transform: capitalize;
}
</style>
I not have permission to comment, so I'll write my experience as an answer.
I have a problem with accentuated chars, solved puting '^' in the begin of regex and iterate each word of the text.
'^' indicates to match only the first char of word.
function captalize(s) {
return s.toLowerCase().replace( /^\b./g, function(a){ return a.toUpperCase(); } );
}
var words = exampleText.split(" ");
jQuery.each(words, function(index, value) {
var w = capitalize(value);
exampleText.append(w).append(" ");
});
The best solution for me was to apply .toLocaleLowerCase() in Javascript and then use the CSS text-transform: capitalize;.
This way, all the first letters are uppercase. I wish we could achieve that with pure CSS only.