Develop Reference

Different font-family for two different parts of the same string

.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.

Customizing google custom search engine. Especially with changing the title font

I have a custom google search engine on my website. The problem is that I am facing an issue where I just can't change the font of the search result titles. So when I try to resize my webpage the results looks too large and jumbled... I did managed to change the snippet size by:
.gs-snippet{
font-size: 3vw;
}
However, when I tried to change the title like this
.gs-title {
font-size: 3vw;
}
it just doesn't budge.... I do not know why it works with .gs-snippet but not with .gs-title. If you can figure out my issue of what I am doing wrong or if you can propose a different way to change the title then that would be great!
Thanks a bunch,
Archie

If you're overwriting a CSS style from Google, then !important is your answer. Read about it here. !important overrides other styles that don't contain !important.
.gs-title {
font-size: 3vw !important;
}
Also, are you sure you want to use 'vw' as your unit for font size? I would suggest using either 'px' or 'em'. That may be the issue, or at least it's worth a shot.

Why does .css('fontSize') produce different results in Edge?

Consider this code (also in a fiddle):
document.getElementById("span").innerHTML += $('#input').css('fontSize');
span input {
font-size: inherit;
}
input {
font-size: 15px;
}
<span id="span" style="font-size: 30px;">
<input id="input"/>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
In Chrome and Firefox, the .css('fontSize') will return 30px, in Edge and IE it's 15px. Why does it do that? The DOM Explorer in Edge even shows the 15px in strikethrough, and therefore should take the inherited 30px as the fontSize:
And the input is rendered with a 30px font, so IE/Edge is picking it up for rendering purposes.

Update: The bug below is now fixed; FremyCompany says he/she is a program manager from the Edge team and the fix will reach customers in early 2017.
It looks very much like an IE and Edge bug. Not having found it, I reported it.
Here's an update to the snippet that sees what IE/Edge is telling jQuery via getComputedStyle or currentStyle:
var input = $("#input");
console.log("jQuery: " + input.css('fontSize'));
if (window.getComputedStyle) {
console.log("getComputedStyle: " + getComputedStyle(input[0]).fontSize);
}
if (input[0].currentStyle) {
console.log("currentStyle: " + input[0].currentStyle.fontSize);
}
span input {
font-size: inherit;
}
input {
font-size: 15px;
}
<span id="span" style="font-size: 30px;">
<input id="input"/>
<span id="size"></span>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
For me, IE11 returns 15px from both getComputedStyle and the Microsoft-specific currentStyle property (it's reassuring that they do at least say the same thing):
So it's not a jQuery bug, it's a Microsoft bug when reporting the size via JavaScript (looks like when inherit is the governing rule), even though it's rendering it correctly.
I tried to find a way to make this a grey area, but couldn't think of anything. For instance, according to the spec, having an input inside a span is entirely valid.

Before I get to the real answer I'd like to dig a little into details.
What is this piece of code doing?
.css();
In the jQuery Docs they tell us:
Get the value of a computed style property for the first element in
the set of matched elements or set one or more CSS properties for
every matched element.
Furthermore:
The .css() method is a convenient way to get a computed style property
from the first matched element, especially in light of the different
ways browsers access most of those properties (...)
So what does computed mean?
MDN Docs:
the computed value of a CSS property is computed from the specified
value by:
Handling the special values inherit and initial, and
Doing the computation needed to reach the value described in the "Computed value" line in the property's summary
Ok, now that part is clear too. Let's get to the real answer:
According to Specifics on CSS Specificity there are css-rules with more 'weight' than others have on an HTML element.
Here is the actual order:
Style Attribute
ID
Class, Pseudo Class Attributes
Element
According to that rules your input should've taken the inherited 30px from the Style attribute.
So what is happening in IE11/Edge?
IE11 and Edge are both computing the CSS Rules wrong. If you change your CSS into only this:
span input {
font-size: inherit;
}
It is starting to work. With the information gathered I am assuming that the JavaScript - Engine of both is computing the real CSS value instead of following the CSS rules order.
I've tried to either change the ID and putting a class on the input but still no luck.
I can remember that IE11 and Edge had some problems with inherited CSS and pseudo classes, maybe it is related to that?
Regards,
Megajin

How to apply Title Case in input box through css

I am using text-transform property to convert inputbox text into Title Case, But I am not getting the exact property or combination to do this.
I also tried
text-transform: capitalize;
text-transform: lowercase;
I am trying to auto conversion for these
nIklesh raut : Niklesh Raut
NIKLESH RAUT : Niklesh Raut
Or should I go with Javascript.

You can do like following way using css. This will work for all word.
input {
text-transform: capitalize;
}
::-webkit-input-placeholder {
text-transform: none;
}
:-moz-placeholder {
text-transform: none;
}
::-moz-placeholder {
text-transform: none;
}
:-ms-input-placeholder {
text-transform: none;
}
<input type="text" placeholder="test" />
Note: But this will work when user will type in small letter only. But, it will be useful to you to go further. To make it for all i think you should use Scripting.
Working Fiddle

I had a similar problem once. text-transform: capitalise will only capitalise the first letter of the word. Other letters will not be affected.
For example:
<p>nIklesh raut</p>
<p>NIKLESH RAUT</p>
<p>niklesh RAUT</p>
p {
text-transform: capitalize;
}
outputs as:
NIklesh Raut
NIKLESH RAUT
Niklesh RAUT
http://codepen.io/jaycrisp/pen/YwjyME
I tried many things, and found no way to do this in CSS alone. Best option is to have server return a lowercase string, then the text transform will behave consistently. Note however, this is also problematic for names. E.g. Leo McGarry will be formatted to Leo Mcgarry.
If you don't have back end access, you'll need to convert to a lowercase string first in javascript.
edit
The spec actually says the following:
capitalize
Puts the first character of each word in uppercase; other characters are unaffected.
https://www.w3.org/wiki/CSS/Properties/text-transform

If you go with javascript, this would solve your problem
var str = "nIklesh raut";
str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
Ref: How to capitalize first letter of each word, like a 2-word city?

text-align: center;
font-family: 'Signika', sans-serif;
line-height: 60px;
font-size: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;
Use something like this.

CSS will only effect the style of the text in your text, it won't change the underlying value of the text box. This means that when you access the value via JavaScript, or if you POST it to your server, the value will be how it was entered, not converted to uppercase. You will need to do that yourself either with JS, or your your server side language.

Tips : Please check reset css style sheet for any override for text-transform
text-transform property - Definition and Usage
The text-transform property controls the capitalization of text.
Default value: none
Inherited: yes
Version: CSS1
JavaScript syntax: object.style.textTransform="uppercase"
All browsers fully supports the property.
CSS Syntax
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
// For DOM
document.getElementById("myP").style.textTransform = "capitalize";
Property Values
none - No capitalization. The text renders as it is. This is default
capitalize - Transforms the first character of each word to uppercase
uppercase - Transforms all characters to uppercase
lowercase - Transforms all characters to lowercase
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.
Test working file :
https://jsfiddle.net/tfn2k46n/

How do I vertically fill a container with uppercase text using JS/CSS?

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.