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/
Related
Is that possible to re-size the special character CSS content? Original size is too big for me, I tried using height and width but not affect.
.icon-arrow:before {
content: '\25BC';
Use font-size to achieve that, because special symbols (for example unicode) have the same behavior as any other character DEMO
.icon-arrow:before {
content: '\25BC';
font-size: 10px;
}
The previous answers are correct, but I would like to add that I prefer to use em to size characters in this way. This will size the character relative to the font-size of the parent element.
For example:
font-size:0.9em
You can use the following:
font-size: (....)px;
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.
HTML
<div data-foo> ... </div>
CSS
div[data-foo]{ ... }
Is this a good idea? Are there any drawbacks?
I think the data- approach makes sense when I have hundreds of "foo" elements, because the HTML markup size decreases (-3 characters for each element).
div[data-foo] is not supported in old IE (IE6, see here: http://www.quirksmode.org/css/selectors/)
div[data-foo] makes less semantic sense
class="foo" and data-foo will take up about the same space when DEFLATE-d. If you haven't set up your server to deflate, you should.
class=foo is only one character longer than data-foo even uncompressed, and is perfectly valid HTML.
It totally depends on you, for example elements must be having different attributes, so you need to define styles and even repeat some, instead I'll use a class which I can use for both, instead of using attribute selector which will limit my declared properties upto an element with that attribute, where you can freely use classes regardless of element attribute combination
.class { /* You can use this anywhere you need these properties */
font-family: Arial;
font-size: 13px;
}
Where as this will limit to ELEMENT-ATTRIBUTE combination
div[data-menu] { /* This will LIMIT you to a combination of div
element having an attribute called data-menu */
font-family: Arial;
font-size: 13px;
}
Important : Specificity will make you a huge mess
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.
Is there a maximum number of caracters for the name of a class in CSS ?
.thereisnomaximumlengthforaclassnameincss {
maxlength: no;
}
Good luck!
There is no maximum length it says.
No maxiumum.
Basically, a name may start with an underscore (_), a dash (-), or a letter(a–z), and then be immediately followed by a letter, or underscore, and THEN have any number of dashes, underscores, letters, or numbers:
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
Don't forget about bandwidth. It may not seem to make a difference but one css file with 30 classes with long names can add up to a big performance issue on a large site
W3C Schema for CSS 2.1 -
http://www.w3.org/TR/CSS21/
Also, I used their CSS validator with a really long class name... it passed validation -
http://jigsaw.w3.org/css-validator/
To add to what others have written, would just like to add if - like me - you find you sometimes end up with crazy long names (because you like being descriptive) then it's worth bearing in mind selectors, which also promotes style re-use and helps keep things easy to read.
e.g.
h1 {
1.5em;
}
styledParagraph {
font-size: 1em;
}
/* Override the default font size if the styledParagraph element is inside an element with the class articlePage */
.articlePage .styledParagraph {
font-size: 1.5em;
}
/* Make all <h1> elements in .articlePage -> . styledParagraph larger than the default */
.articlePage .styledParagraph h1 {
font-size: 2em;
}
This is very widely supported (even in MSIE 6) and it's much easier to read than a class name like .articlePageStyleParagraphHeading.
Similar to this question on ID names in HTML as well. Seems like there is no "practical" limit.
I say keep them as short as possible, while still being descriptive - why even flirt with crazy-long names? :)