On my website i use non standard cyrillic font. It looks well but it have problems with some special symbols, for example - quotes (for some reason opening and ending quote look different).
I would like to set font-family for specific symbols using CSS. Is it possible?
You can manage this using a unicode range #font-face rule
MDN Reference
I'm unsure as to how well this demo will work in a Snippet as it will depend on you have the designated font installed. However, in general, it's something like this:
#font-face {
font-family: 'Algerian';
src: local('Algerian');
unicode-range: U+022-026;
}
div {
font-size: 4em;
font-family: Algerian, sans-serif;
}
div {
text-align: center;
}
p {
font-size: 72px;
}
<div>
<p>" Lorem & Ipsum "</p>
</div>
In this instance I've applied the rule to open & closed quotes and the ampersand.
Support: CanIUse.com
For Firefox though:
Support can be enabled in Firefox using the layout.css.unicode-range.enabled flag
If you want to change your symbols to a new font then you'll have to wrap them in a tag and assign a class...
in your CSS add a class for the font
.symbol {
font-family: Arial;
}
Then in your HTML you will need to use this class on your symbols...
<p>Jesse Jackson? Do you even... ah, I see you have a telephone at least. You know that blinking thing I've been calling you on?
<i class="symbol">"<i>I will break this, I will BREAK THIS.<i class="symbol">"<i> </p>
If the problem is only for quotes?
You could set the :before and :after pseudo for a <blockquote></blockquote>, which could be set to a icon font. Perhaps fontawesome?
blockquote {
position: relative;
padding: 1em 2em;
}
blockquote:before,
blockquote:after {
position: absolute;
font-family: FontAwesome;
}
blockquote:before {
content: "\f10d";
left: -1em
}
blockquote:after {
content: "\f10e";
right: -1em
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="stylesheet">
<blockquote>Jesse Jackson? Do you even... ah, I see you have a telephone at least. You know that blinking thing I've been calling you on? I will break this, I will BREAK THIS. Damn druggie idiot. Is this what you've been doing the whole time I've been trying to reach
you?</blockquote>
you can use easily like
.custom-font{
font-family:any
}
and then
<div>hello there <span class='custom-font'>i am custom</span> but i am not</div>
Related
I'm trying to do somewhat of the opposite of the <q> tag. The q tag visually displays quotes in the web page, but if you copy paste the text, the quotes are not present in the pasted text. I want the opposite - no visual quotes in the web page, but quotes are present in the copy pasted text.
Why? Because I sometimes prefer to use other visual styles in my webpage instead of quotes. But when a user copies the text, since I cannot rely on them pasting the text into something capable of preserving the rich formatting/styles, I wish to revert to using quotes because they're simple ascii characters which will work in any plain text context.
I'll give a concrete example to help clarify.
Given:
.qq { background-color: yellow; }
I am <span class=qq>some quoted</span> text.
When the user views the page, they should see:
But if they were to copy the text and then paste it somewhere, the pasted text would be:
I am "some quoted" text.
Is it possible via just css? I'd prefer not to use js.
I don't really care what the html/css needs to be, so if quotes, or the q tag etc... need to be present in the html source instead of a span, that's totally ok.
The only way I can think of without JS is to put the quotes in the markup and hide them using CSS. The markup will get a bit messy though. Something like:
.lq,
.rq {
font-size: 0;
color: transparent;
}
I am <i class="lq">“</i>some quoted<i class="rq">”</i> text.
using JS you can do this way
window.addEventListener("copy", (e) => {
event.preventDefault();
const selection = document.getSelection();
let selectedText = selection.toString();
let selectedTextWithQuotes = `"${selectedText}"`;
// FOR SAVING IN CLIPBOARD
event.clipboardData.setData("text/plain", selectedTextWithQuotes);
});
Using only css you could use transparent double quotes:
.qq { background-color: yellow; }
quote {
display: inline-block;
width: 0px;
color: transparent;
}
I am <quote>"</quote><span class=qq>some quoted</span><quote>"</quote> text.
UPDATE
A not recommended alternative. It is compatible with 75% of browsers. (I'm referring to the # font-face: size-adjust property), but it's an alternative.
For the main font you create a character set that includes only the double quote, but with the size-adjust property at 0%. The remaining text will be rendered with the secondary font.
I am "some quoted" text.
#font-face {
font-family: 'myFont';
src: url(https://fonts.gstatic.com/s/crimsonpro/v23/q5uUsoa5M_tv7IihmnkabC5XiXCAlXGks1WZzm1MP5s-.woff2) format('woff2');
unicode-range: U+0022;
size-adjust: 0%;
}
.yourBody {
font-family: myFont, 'courier new';
}
.qq { background-color: yellow; }
<div class="yourBody">
I am "<span class=qq>some quoted</span>" text.
</div>
.quote-character-left {
margin-right: -0.5em;
opacity: 0;
}
.quote-character-right {
margin-left: -0.5em;
opacity: 0;
}
.quote-text {
display: inline;
background-color: yellow;
}
<p>I am <span class="quote-character-left">"</span><span class="quote-text">some quoted</span><span class="quote-character-right">"</span> text.</p>
I have a tag on my site that I want to remove. It seems that one of the features on my site is adding the tag. I was wondering if I could use CSS to remove the tag? The tag looks like this.
<p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">…</p>
I am just not sure how to remove it because it doesn't have an ID or class.
You can do it by CSS attr selector.
Please check CSS attr selector.
p[data-f-id="pbf"] {
display: none !important;
}
<p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">I won't appear.</p>
Just write this javascript in someplace on the web and done.
This code will remove first p[data-f-id="pbf"] element.
document.querySelectorAll('p[data-f-id="pbf"]')[0].remove();
Or if you have more than one element you can remove all of them:
let pbfelements = document.querySelectorAll('p[data-f-id="pbf"]');
pbfelements.forEach(function(elem) {
elem.remove();
});
remove() function Javascript
querySelectorAll() function Javascript
I'd like to add a Font Awesome Icon and other styling (e.g., <em>) to the qq-drop-area-text of FineUploader. Is this possible? It looks like the text is styled using a CSS content area.
Example HTML from FineUploader:
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here!">...</div>
Desired:
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="<span class='fa fa-upload'></span> Drop files <em>here</em>!">...</div>
Thanks
.qq-uploader:before {
/*content: attr(qq-drop-area-text) " ";*/
font-family: FontAwesome, 'Open Sans', Arial;
content: "\f0c5 Drop files here";
position: absolute;
font-size: 200%;
left: 0;
width: 100%;
text-align: center;
top: 45%;
opacity: 0.25;
}
Here's my example where f0c5 is the Unicode value for the Font Awesome icon I wanted to use. In this case it's the fa-files-o icon. Click any icon on the Font Awesome list of icons to display its Unicode value.
To add more styles to the dropzone message, simply include the following in your project's CSS file:
.qq-uploader:before {
// dropzone text styles go here
}
I've been using entypo (downloaded from entypo.com), and displaying the icons like so:
.icon:before {
display: inline-block;
font-family: 'Entypo';
text-decoration: none;
speak: none;
}
.email:before {
content: "\2709";
}
Pretty standard. But since the hinting is off when you download it from entypo.com, I've switched to downloading it from fontello. Only now my css content codes don't work anymore.
I can see in the demo that fontello uses spans like this, to call the icons from the html:
<span class="i-code">0xe829</span>
But that just seems ugly to me. I want to do it from the css, but how can I find out what kind of codes to put in my css?
Ok, so I found out that what you have to do is not use the codes as mentioned on fontello:
U+E84D
U+E854
But rewrite these to:
\E84D
\E854
(so remove the "U+" and replace it with a "\")
Use them like so:
content: "\E84D";
EDIT:
So, on request, the complete CSS syntax you would use is:
.icon:before {
display: inline-block;
font-family: 'Entypo';
text-decoration: none;
speak: none;
}
.email:before {
content: "\E84D";
}
In combination with the following HTML:
Mail me
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes.
I have created a test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Recipe Site</title>
<link rel='stylesheet' href='/css/main.css'>
<link rel='stylesheet' href='/css/site_header.css'>
<!-- Let google host jQuery for us, maybeb replace with their api -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<div id="site_container">
<div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
<div id="site_content">
Some main content.
</div>
<div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
</div>
</body>
</html>
File: /css/main.css
/* Reset Default Padding & Margin */
* {
margin: 0;
padding: 0;
border: 0;
}
/* Set Our Float Classes */
.clear { clear: both; }
.right { float: right; }
.left { float: left; }
/* Setup the main body/site container */
body {
background: url(/images/wallpaper.png) repeat;
color: #000000;
text-align: center;
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
}
#site_container {
background-color: #FFFFFF;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
}
/* Some style sheet includes */
/* #import "/css/site_header.css"; */
/* Default Font Sizes */
h1 { font-size: 2.2em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
p { font-size: 1.2em; }
/* Default Form Layout */
input.text {
padding: 3px;
border: 1px solid #999999;
}
/* Default Table Reset */
table {
border-spacing: 0;
border-collapse: collapse;
}
td{
text-align: left;
font-weight: normal;
}
/* Cause not all browsers know what HTML5 is... */
header { display:block;}
footer { display:block;}
and now the file: /css/site_header.css:
#site_header {
background-color: #c0c0c0;
height: 100px;
position: absolute;
top: 100px;
width: 100%;
}
Problem:
When I use the above code, the site_header div does not have any formatting/background.
When I remove the link line from the HTML doc for site_header.css and instead use an #import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div.
Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine...
So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.
The #import directive has to come first in your CSS. As soon as one style is hit by the browser, all other import lines will be ignored.
To quote WC3:
"any #import rules must precede all
other rules (except the #charset rule,
if present)"
See http://www.w3.org/TR/CSS2/cascade.html#at-import
One thing to consider, is that each #import still causes an HTTP request, so it's not any more efficient than using multiple link tags. In fact it may be less efficient as imports may be sequential rather than parallel requests. See this article. IMO it also adds complexity because you end up managing CSS references in two places (head tag of markup plus 1 or more CSS files) vs a simple list of link tags.
I'd also recommend where you can combining CSS files when your site is in production as it will reduce HTTP overhead.
Can I just say, pet peeve here, but place images related to the CSS file in the CSS folder itself, not in /images/.
The point of CSS is the separation of style and content, and only content images should go in /images/. Any images called by the CSS should be placed in the same directory and called pathlessly, e.g.:
body {
background: url(wallpaper.png) repeat;
}
That way at a later date if it comes to changing the style, or making multiple styles it's just a case of updating one link and moving one folder (/css/) rather than having a mess of images scattered all over the filesystem. Plus it's always a bad idea to use absolute paths to files (such as /images/wallpaper.png).
First of all, you have invalid markup. The link tag must be closed...
<link rel="stylesheet" href="/css/main.css" />
Second, why don't you use double-quotes consistently for element attributes (here in the link tag you happen to use single-quote)? This is not part of the problem, but I find it daunting that you would intermingle various syntax conventions like this.
Lastly, I would not recommend using #import because it does not offer a compelling benefit. It must be the first thing in the CSS file. An additional HTTP request still has to be made for each of the additional CSS file(s). And on top of that, IE cokes when you to specify a target media for imports. I stick to the good old classic link tag because it just works (given that you have valid markup!).
Use firebug to inspect the div and see what styles are being applied to it, you might get some more insight.
use #import rule into your main.css file like:
#import url("css/site_header.css");(this code should be on top of your main.css)
the above import snippet will bind your multiple css files into single css
then that main.css file use into your HTML.
For any issues with CSS like this I would recommend using firebug. You will be able to see if your site_header.css is loading properly.
If it is loading you will be able to see which styles are being applied to which elements, perhaps some are being overwritten?