.my-link::after {
content: "text \2661";
font-family: Arial,sans-serif;
}
Looking at the code above I need to set the font-family for the content of the pseudo element.That's wouldn't be a problem.
But I need to set the font-family for the text part to Arial and the font family for the \2661 part to Helvetica.
Basically two different font-families for different parts of the same string.
Is there any way to achieve this with only CSS or Sass?
Otherwise I can just think of setting the font-family for the whole content of the pseudo element via CSS to Arial and then write a JavaScript function, which goes through the string inside the content of the pseudo element, find the \2661 part and changes its font-family to Helvetica.
Any suggestions, idea, hints etc would be appreciated.
Use a combination of before & after to achieve this. Ensure that the pseudos are floating right and they'll end up looking like they're both appearing after the link.
https://jsfiddle.net/zxwkjmt3/
This works assuming your links are display:inline-block;
.my-link {
display: inline-block;
}
.my-link::before {
content: '\2661';
float: right;
font-family: Helvetica,sans-serif;
}
.my-link::after {
content: 'text';
float: right;
font-family: Arial,sans-serif;
}
Link
Edit: It's worth noting, avoid thinking of pseudo's as nested elements, they are not. They'll give with a little extra flexibility but they're limited in what you can do, if possible nesting actual elements gives you the most flexibility.
Related
I would like to apply
font-family: Helvetica to all element in the site.
So I write
body, html {
font-family: Helvetica !important;
}
in the CSS file, the problem is , the font-family is still override by other inner CSS. How to force the whole site use one font family?
Thanks a lot for helping.
Is it being overriden by other css style rules with !important? If so, there is nothing to do as more specific selectors win over more general ones.
* {
font-family: Helvetica !important;
}
You could use the inspector in chrome, or other browser's equivalent to see how the cascade styles on your particular element unfolds. Your inner CSS could have also defined the !important flag, which overrides you definition on body.
If you post your entire html and CSS people might be able to help more easily.
I'm trying to create a textarea control in which it is possible to mention other users. The feature is pretty much similar to the one found in Facebook, and the implementation is similar too. When the user types an "#", a dropdown is presented from which a user can be selected which is then displayed with a highlight in the textarea. To be able to selectively render highlights in the textarea, I'm using an overlay div with the same text, but with span tags to create highlights.
The overlay has the same width, the same font and font-size, the same letter-spacing, same line-height, etc., to make sure all highlights will align properly with the text in the textarea. All the text in the overlay div, except for the highlights themselves, is transparent to avoid artifacts of rendering anti-aliased text over text.
This all works pretty well, except that when there is a mention highlight, the text in the highlight is somehow just slightly less wide than the text below it in the textarea, which causes a very slight mismatch. Worse, this small mismatch accumulates when there are multiple highlights, and it can sometimes cause a line to wrap in the textarea but not in the div, after which the whole illusion just falls apart.
I have verified that all text rendering options are exactly the same for the text in the textarea and in the overlay and in the highlights. All have equal font, font-size, letter-spacing, line-height, there's no margin, border or padding on the highlights, etc.. I have also looked in the WebKit Inspector to see if I might have missed any properties that could still affect text rendering, but couldn't find any. Simply put, I can't explain where this slight rendering difference comes from.
Please note that the rendering difference does not occur as long as the overlay doesn't contain any highlights.
I have also tried only rendering the overlay and not rendering the textarea at all (instead of having the overlay be transparent outside of the highlights), but this has the nasty side-effect that I won't see any cursor anymore.
Is there some CSS property that I still might have overlooked or is there some other reason why breaking the text into multiple spans would cause the total width of the text to slightly differ from an uninterrupted text node? Any suggestions would be greatly appreciated!
Update: For any others who might run into this problem, it's illustrated in the following jsfiddle: http://jsfiddle.net/brt8w85z/5/
<style type="text/css">
.parent {
text-rendering: optimizeLegibility;
position: relative;
}
textarea {
border: 0;
color: #000;
resize: none;
}
.overlay {
color: transparent;
pointer-events: none;
}
textarea,.overlay {
font-family: Helvetica,sans-serif;
font-size: 12px;
left: 10px;
letter-spacing: normal;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
width: 200px;
}
.highlight {
background-color: #00f;
color: #fff;
}
</style>
<div class="parent">
<textarea>Tom Kleijn, Mark van der Velden and Arend van Beelen</textarea>
<div class="overlay"><span class="highlight">Tom Kleijn</span>, <span class="highlight">Mark van der Velden</span> and <span class="highlight">Arend van Beelen</span></div>
</div>
The problem can be fixed by adding "text-rendering: geometricPrecision" to the "textarea,.overlay" rule.
Seems I have found the solution myself: On the body there's a definition of "text-rendering: optimizeLegibility". Setting this back to "text-rendering: geometricPrecision" on the textarea fixed the problem. The reason this was not obvious before was because the WebKit Inspector did not show the inherited text-rendering on the textarea, even though it does so for (most?) other inherited properties.
I have a text that is uppercase, e.g. ABC.
As it is uppercase, all characters have the same height.
I also have a container (div) with fixed height, e.g. 100px.
How do I make this text fill it vertically, so each letter is exactly 100 pixels high?
I tried font-size: 100px, but it does not fill the container (there are gaps above and below).
See http://jsfiddle.net/6z8un/1/ for an example.
UPDATE 1:
Let's assume all characters actually have the same height (difference either does not exist or is negligible). Otherwise the question does not make much sense.
UPDATE 2:
I am pretty sure it can be solved using https://stackoverflow.com/a/9847841/39068, but so far I had no perfect solution with it. I think ascent and descent are not enough, I would need something else for the top space.
line-height http://jsfiddle.net/6z8un/2/ will not solve the problem because this will not remove the whitespaces. You could apply the size by hardcoding (for me it fits with font-size of 126px) But this is different to every user (sans-serif can be configured by user/system/browser)
Windows default sans-serif font MS sans serif is different to Droid sans serif on Android or DejaVu Sans on Ubuntu.
To solve this problem, you could set a font to default, like Times New Roman, but not every system does have this font by default.
To solve this, you could use a custom font imported from a server like htttp://google.com/fonts
but not every browser does support custom fonts.
I think the only way to solve this is to use an image.
But custom fonts should do their job on modern browsers too :) (e.g.: http://jsfiddle.net/6z8un/5/ )
Is this ok?
http://jsfiddle.net/6z8un/4/
HTML:
<div><span>ABC</span></div>
CSS:
div {
height: 100px;
background-color: #ddd;
font-family: sans-serif;
}
span {
font-size:136px;
margin-top:-25px;
display:inline-block;
};
Use this code. I hope this can help you.
<div class="outer"><div class="inner">ABC</span></div>
.outer {
margin: 0;
padding: 0;
height: 75px;
overflow-y: hidden;
}
.inner {
font-size: 100px;
background-color: #ccc;
font-family: sans-serif;
margin-top: -18px;
}
Note: As I know whenever we use font-size the upper and lower gap is also the part of height. I mean font-size = upper gap + actual height of font + lower gap. So if we want 100px div then use font-size larger than 100.
So far I made a small script that measures letter heights using canvas (would be a good thing to put on GitHub I suppose).
It is currently slightly unprecise, mostly because of caching.
I have published it as a library on GitHub, see here: https://github.com/ashmind/textmetrics.
Unfortunately I did not have time to make demo work as a GitHub page yet, so I can't link to it.
If I have labels such as "1234B", "5678M"... How can I change this label so the letter at the end is smaller size than the size of numbers?
<p>1234<span class="smaller">B</span></p>
.smaller {
font-size: 5px;
}
The simplest way is to use the small element (which is still allowed in HTML5, though with contrived “semantics”, but to browsers it still means just smaller font size):
1234<small>B</small>
You can then use CSS to tune the font size reduction, e.g. with
small { font-size: 80%; }
However, this produces typographically bad results, since different font size implies different stroke width, so the letters will look thinner, too, in addition to being smaller. In typography, one would probably use small-caps glyphs of the font instead (though in typography, one would normally rather try and make digits and letters match in size, rather than unmatch!). This is in principle possible on web pages too (using font-feature-settings: "smcp", with prefixes), though still rare, and it requires a font that has such glyphs available (like Calibri, Cambria, or Palatino Linotype).
watson has it.............. but let me think CMS thinking......if you just want to lowercase the only letter and the numbers stay put you can do this:
HTML:
<div style="text-transform: lowercase;">3529M</div>
or
<div class="lowMe">3529M</div>
<div class="lowMe">5546D</div>
CSS:
.lowMe {text-transform: lowercase}
else I would just do span as it was mentioned...
There is a custom namespace named Item: on the main wiki that I edit, and the complaint is that every page inside that namespace shows up as Item:This_item -- Item:That_item -- Item:Foo_item.
I went surfing through the web and the CSS for that skin, and came across:
span#ca-nstab-main:before,
span#ca-nstab-user:before,
span#ca-nstab-wp:before {
content: "[ ";
}
span#ca-talk:before {
content: "& ";
}
span#ca-talk:after {
content: " ]";
}
which takes the namespace name "I'll use main as the example" and the corresponding talk page name and makes them show up as [ main & talk ] instead of main talk.
I was wondering if there was something similar that would allow me to display Item:Foo as just Foo stripping the "Item:" off. I know that the items listed on the category page are in div#mw-pages a tags.
Perhaps even an in-line way to use JavaScript to strip the first five characters off? I say "in-line" because $wgAllowUserJs is set to false on this wiki.
Edit:
The wiki-core parses it out as:
<style type="text/css">
/*<![CDATA[*/
a[title^="Item:"] {
font-family: 'Lucida Grande', Geneva, Arial, Verdana, monospace;
font-size: 12px;
display: inline-block;
overflow: hidden;
text-indent: -2.1em;
}
/*]]>*/
</style>
How do I make the quotes not be parsed, is there a trick? Can I use single quotes instead of double like on the font-family line?
You could try something like this if you're only able to use CSS. (http://jsfiddle.net/zPJHU/)
li a {
/* monospace fonts may be more consistant cross browsers */
font-family: "Courier New", monospace;
font-size: 1em;
display:inline-block;
overflow:hidden;
text-indent: -2.9em; /* may have to play with this value */
}
li a:hover{
font-size: 1.8em; /* just for demonstration of font-size increase */
}
Demo markup:
<p>Hover over links to increase font-size</p>
<ul>
<li>Item:Wicket</li>
<li>Item:Chewbacca</li>
<li>Item:Obi Wan Kenobi</li>
</ul>
dunno if that works, but you could prepand and append a span open / close tag at the right position to have the following:
<span class="hideme">Foo:</span>Bar
as i've said i haven't tried it, but i don't know another way and there might be no possibility to cut content by just using css. javascript should do it.