I'm using old style numerals through OpenType font feature settings on my site. Is there any way to add letter spacing to numerals without wrapping each one of them in a span class?
.yourNumbers {letter-spacing: [value]}
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
The letter-spacing property has been defined as specifying added spacing between characters. In practice, however, this has been implemented so as added spacing after each character of the element. This means that if you have e.g. <abbr>abc</abc> and you set abbr { letter-spacing: 1em } (a big value just to see the effect clearly), then there will be added 1em after a, b, and d. This would be bad e.g. if the element is immediately followed by a punctuation mark.
It seems that the following trick can be used if you wish to be able to use natural markup that does not leave out the last character: set a negative right margin on the element, with the absolute value being the same as the letter spacing, to nullify its effect after the last character:
abbr {
letter-spacing: 0.05em;
margin-right: -0.05em;
}
This is independent of other settings, like small caps settings, you might have for the element. However, if you have other settings for the element, it would be even more awkward to omit the last character, since you would need something like <abbr><span>ab</span>c</abbr>, with some other settings on the abbr element and with the letter-spacing property on the inner span element—unless you use the trick outlined above.
Related
Forcing the text split into multiple lines when it reaches the maximum width of the #div.
How can I do this? because, if I try to output data with 200 characters without spacing, I get the following:
Result 1 (no spacing):
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
Result 2 (have one space):
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa (space)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
Expected result:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
Do I need to use the following?
result+=str.substring(0,200) "\n";
or it is a CSS styling?
Applying word-break: break-all; will make the text wrap at whatever character whenever it exceeds it's parent's width, without the need of a space or other type breakpoint.
As already stated in the accepted answer use the following:
word-break:break-all;
The W3 specification that talks about these seem to suggest that
word-break: break-all is for requiring a particular behaviour with CJK
(Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is
the more general, non-CJK-aware, behaviour.
(credit: AakashM: see post)
Word-Break Property options (W3Schools):
normal Default value. Break words according to their usual rules
break-all Lines may break between any two letters
keep-all Breaks are prohibited between pairs of letters
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about
Working Example:
Word-Break W3Schools
make a smaller div and use CSS text-align: justify and word-break:break-all;
Is this what you want?
use div and set the width of a div
In CSS File
.respose container:{
width:200
}
And then in the html file add
<p div="response container">
if(string.length>limit)
{`return string.substring(0,limit)+'...';`
}
else
{`return string;`
}
</p>
The word-break property can be used to control the text flow. The following value would fix your issue:
word-break: break-all
More info can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
The updated answer should be:
overflow-wrap:break-word;
It will break a word that by itself would not be able to fit on its own line, but leave all other words as they are (see overflow-wrap here).
You could also use:
overflow-wrap:anywhere; but this will allow line breaks after any word in an effort to reduce the width of an element. See the difference described below from MDN:
[break-word is] The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.
Also, anywhere is not supported by Internet Explore, Safari, and some mobile browsers while break-word is supported on all major browsers (see [here][2]).
word-break: break-word; should no longer be used because it is deprecated in favor of the overflow-wrap:break-word;. Now, the word-break property is intended to be used when you want to break words regardless of whether they could fit on their own line (i.e. the OP's first example with word-break: break-all.
In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.
(From overflow-wrap also linked above )
Right now I've got a paragraph and I'd like to capitalize the entire first line. I've set the first paragraph to an ID "firstp" and tried:
#firstp::first-line {
text-transform: uppercase;
}
I've tried it with text-transform: capitalize but that doesn't work either. It's strange because I've managed to change the first letter (changed font size) using #firstp:first-letter.
text-transform on :first-line is really buggy right now, see the reference here http://reference.sitepoint.com/css/text-transform
You can use this jquery plugin called linify https://github.com/octopi/Linify to select the first line and then apply the property of text-transform: uppercase
Regards,
I think Chrome has a problem with ":first-line". Try removing that and using james31rock's syntax on this page, except in his example the CSS should be "#firstp{..." to reflect the ID in his HTML rather than ".makeupper".
You might want to use:
font-variant: small-caps;
It looks better in my opinion and is supported in all major browsers.
More info
http://en.wikipedia.org/wiki/Small_caps
In order to accomplish this you must use the following Pseudo-element within the correct syntax. Example:
HTML PORTION:
<selection id="Welcome">
<p>Some text</p>
</section>
CSS SHEET:
#Welcome p:first-of-type:first-line {
text-transform: uppercase;
}
I hope this helps. Sorry for the late entry. I guess, better late than never!
There might be another way ...
What if you have two spans with text inside paragraph, one of the spans would have position set to upper left corner of the paragraph, so the two spans would overlap. Now set height of the upper span to about line-height of your text and overflow to hidden so only first line of the span would be visible. Set text-transform to uppercase on the upper span and vou la you have first line in uppercase.
Downside of this solution is, uppercase text is wider so there might be missing words on next line. You can fix this by using fixed-width font or try to set letter-spacing on both spans so width of uppercase and lowercase texts would be same.
Here is jsFiddle, though it's not ideal sometimes when you change the window size, it might be sufficient.
It doesnt seem to work either way, in Chrome. In I.e. text-transform works. I do not have firefox to test with.
http://jsfiddle.net/vJSeq/4/ - using text-decoration
http://jsfiddle.net/vJSeq/3/ - using text-transform
You can see that the selector is right because it is highlighted.
My suggestion would be to use something to seperate the text you want highlighted, by creating a span tag inside of the paragraph and assign it a class
<p id="firstp">to stop the degradation of the planet's natural environment and to build a future in <span class="makeupper">which humans live in harmony with nature, by; conserving</span> the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
​
and the css
.makeupper
{
text-transform: uppercase;
}
http://jsfiddle.net/vJSeq/5/
I want to capitalize the first letter of sentences, and also the first letter after commas if possible. I want to add the code in here:
.qcont {
width: 550px;
height: auto;
float: right;
overflow: hidden;
position: relative;
}
You can capitalize the first letter of the .qcont element by using the pseudo-element :first-letter.
.qcont:first-letter{
text-transform: capitalize
}
This is the closest you're gonna get using only css. You could use javascript (in combination with jQuery) to wrap each letter which comes after a period (or comma, like you wish) in a span. You could add the same css as above to that span. Or do it in javascript all together.
Here's a snippet for the css approach:
.qcont:first-letter {
text-transform: capitalize
}
<p class="qcont">word, another word</p>
This cannot be done in CSS. The text-transform property makes no distinction according to the placement of a word inside the content, and there is no pseudo-element for selecting the first word of a sentence. You would need to have real elements, in markup, for each sentence. But if you can do that, then you could probably just as well change the initial letters to uppercase in the content proper.
Capitalization at the start of a sentence is a matter of orthography and should be done when generating the content, not with optional stylistic suggestions (CSS) or with client-side scripting. The process of recognizing sentence boundaries is far from trivial and cannot in general be performed automatically without complex syntactic and semantic analysis (e.g., an abbreviation ending with a period may appear inside a sentence or at the end of a sentence).
If you need to capitalize the first letter in contenteditable container you can't use the css property
#myContentEditableDiv:first-letter {
text-transform: capitalize;
}
because when you try to delete a letter automatically you will delete all the text contained in the contenteditable.
Try instead the example provided by sakhunzai in https://stackoverflow.com/a/7242079/6411398
for a working solution.
text-transform:capitalize; will capitalize the first letter of a sentence, but if you want to also do it for commas you will have to write some javascript. I agree with #BoltClock, though. Why on earth would you want to capitalize after a comma?
Edit: For the sake of readers: text-transform:capitalize; will capitalize each word of a sentence, not the first one only.
You must use the :first-letter CSS selector with the above.
I would like to display a number of underscores to the user to let them know how many characters they need to fill in to satisfy the length requirement.
My problem is: underscores aren't separated by spaces.
Q: What font or css style should I use so that my underscores can be easily counted?
You can just use letter-spacing: 0.4em; to separate out the various characters in the element. I'm assuming you're using an input element, so:
input {
letter-spacing: 0.4em; /* or whatever measurement you prefer... */
}
JS Fiddle demo.
References:
letter-spacing at the MDC.
Use the CSS property letter-spacing.
Visual example: http://jsfiddle.net/8w9WY/
I'm trying to style a word with a big first letter and spacing for the other letters. My current solution is pretty ugly: see here (and a malfunctioning jsfiddle here).
Ideally, instead of something ugly like this: <dropcap>T</dropcap><span style="letter-spacing:.2em;">HERE</span><span style="margin-left:-.2em;"> is</span> nothing more unreasonable...
I could have something sensible like this: <dropcap>THERE</dropcap> is nothing more unreasonable...
Any ideas? Thanks.
You could just use the :first-letter pseudo-element.
The :first-letter pseudo-element is
mainly used for creating common
typographical effects like drop caps.
This pseudo-element represents the
first character of the first formatted
line of text in a block-level element,
an inline block, a table caption, a
table cell, or a list item.
It's supported in IE8+ and all modern browsers.
For example: http://jsfiddle.net/HTnBP/4/
For the other half of your question, try:
T<span>HERE</span>
div > span:first-child {
letter-spacing: .2em;
margin-right: -.2em
}
http://jsfiddle.net/HTnBP/5/
I don't really see the point in using a custom dropcap element. Unless you don't mind adding extra complexity to support IE8 and lower, or you simply don't care about those browsers.
Or maybe you can use this JS solution i found
http://webplatform.adobe.com/dropcap.js/