I'm a graphic designer in a magazine and we'd like our website to be closer to our printed issues.
In the magazine, we use small caps for strings of more than 2 capital letters in a row.
I know it is possible to use true small caps with an OpenType font. I also know that you kan target 1st lines or 1st letters with CSS
So my question is:
Would it be possible to target/detect strings of capitals letter within a text, and apply automatically the font-variant property to it (without having to manually apply styles or classes).
here's an example
If you mean like this, sure! The regular expression could be improved though, as it only matches words, not sequences of words, but regex is still alienspeak to me, so this is the best I can do:
[].forEach.call(document.querySelectorAll(".smallcapsify"), function(content) {
var parsed = content.innerHTML.replace(/[A-Z]{2,}/g, '<span class="small-caps">$&</span>');
content.innerHTML = parsed;
});
#import url(http://fonts.googleapis.com/css?family=Merriweather);
span.small-caps {
font-variant: small-caps;
text-transform: lowercase;
}
/* Styles to make it look nicer */
body {
font-size: 2em;
font-family: Merriweather, serif;
text-rendering: optimizeLegibility;
/* Enable common and discretionary ligatures, according to http://blog.fontdeck.com/post/15777165734/opentype-1 and http://caniuse.com/#search=font-feature-settings */
-webkit-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";
}
<div class="smallcapsify">
This is SOME TEXT. Here is some MORE text.
</div>
Related
Given the element :
<span>一、對話 Dialogues</span>
One of my font is really unelegant on that side, adding an overly wide space :
Is there a css rule to style only the punctuation 、 ?
NB: I searched the web and found nothing. Currently assume only HTML elements can receive styles. So I have to use JS to get the string, then str.replace('、','<span class="punt">、</span>'), then put back the string with the dedicated html element and class. But I would like to ask the community and create this question, even if dumb, so other users may find this question/answer in the future.
You could use #Font-face and Unicode range to style your punctuation with an other font.
First, identify your characters' code :
var charcode = '、'.codePointAt(0).toString(16); // "3001"
alert(charcode) // "3001"
Then, load your default font and your support font with unicode range
/* For general characters *********************************** */
#font-face {
font-family: 'MyFont';
font-style: normal;
font-weight: 400;
src: local('Font1onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/font.woff2') format('woff2'),
url('https://fonts.gstatic.com/font.woff') format('woff');
}
/* For special characters ********************************** */
#font-face {
font-family: 'MyFont'; /* IMPORTANT: same name*/
src: local('Font2onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/anotherFont.woff2') format('woff2'),
url('https://fonts.gstatic.com/anotherFont.woff') format('woff');
unicode-range: U+3001; /* IMPORTANT */
}
Should work.
Source : https://jakearchibald.com/2017/combining-fonts/
Alternatively, you could edit that font on this character.
I am Using a Regional language unicode font-face in my site but the numbers are not looking good.
So I want to apply new font-style or css to numbers only..
please help
This can be done using CSS's unicode-range property which exists within #font-face.
The numbers 0 to 9 exist in Unicode within the range U+0030 to U+0039. So what you'll need to do is include a font alongside your existing font which specifically targets this range:
#font-face {
font-family: 'My Pre-Existing Font';
...
}
#font-face {
font-family: 'My New Font Which Handles Numbers Correctly';
...
unicode-range: U+30-39;
}
The result of this will be that every instance of Unicode characters U+0030 (0) through to U+0039 (9) will be displayed in the font which specifically targets that range, and every other character will be in your current font.
You can wrap all numbers in p tags with a <span class="number">:
CSS
.number {
font-family: Verdana;
}
jQuery
$('p').html(function(i, v){
return v.replace(/(\d)/g, '<span class="number">$1</span>');
});
But personally, I would go with James suggestion ;)
http://jsfiddle.net/ZzBN9/
There is no way to apply CSS to all numbers specifically. In each number tag you could add the attribute class='number' and then in the CSS you could add
.number {
font-family: arial;
}
Better with this
$('p').html(function(i, v){
return v.replace(/(\d+)/g, '<span class="number">$1</span>');
});
With + you avoid one span per complete number (span for 321), not one per each number found (span for 3 for 2 and for 1)
You can use the regex replace and detect the numbers then add the class
following code:
$('p').html(function(i,c) {
return c.replace(/\d+/g, function(v){
return "<span class='numbers'>" + v + "</span>";
});
});
.numbers
{
color:red;
font-size:30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
View 11 new out of 11 message(s) in your inbox
</p>
Possibly insoluble Sass/CSS problem: I am using a variable font but Chrome currently only supports font-variation-settings rather than being able to use font-weight, font-style etc I still want to use font-weight etc for old browsers that don’t support variable fonts.
I don't want to have to type out two properties everytime I set a font-style or font-weight! So I came up with some mixins:
#mixin font-weight($weight) {
font-variation-settings: "wght" $weight;
font-weight: $weight;
}
#mixin oblique($angle) {
font-variation-settings: "slnt" $angle;
font-style: oblique #{$angle + deg};
}
Obviously I will sometimes want to use both font-weight and oblique and you can’t set the same CSS property twice - it will just get overridden. So I came up with this
#mixin font-weight($weight) {
--weight: #{$weight};
font-variation-settings: "wght" var(--weight), "slnt" var(--angle, 0);
font-weight: $weight;
}
#mixin oblique($angle) {
--angle: #{$angle};
font-variation-settings: "slnt" var(--angle), "wght" var(--weight, 400);
font-style: oblique #{$angle + deg};
}
which kinda works except that defaulting to font-weight 400 isn’t ok - that is the default normal weight of browsers, but it doesn’t account for the fact that I will have probably set the font-weight somewhere else. I could just half give-up and make it a single mixin #mixin weight-and-oblique($weight, $oblique) but that is a horrible API to work with imo. Is there a solution?
Typically, the way to emphasize text within italic text is to make it non-italic. For example:
The publication of James Joyce's Ulysses was met with great controversy.
I know I can do this:
em em {
font-style: normal;
}
But that won't work if my parent italicized phrase doesn't use <em>. For instance, it won't work if I have
<p class="photo-caption">The publication of James Joyce's <em>Ulysses</em> was met with great controversy.</p>
Of course, I can do this:
.photo-caption em {
font-style: normal;
}
but this has potential maintainability problems, since every change to the parent element now also requires a change to the child element.
Is there a way to tell CSS to globally unitalicize nested italics?
The capabilities of CSS are necessarily limited so that browsers can process the rules quickly.
I think your original approach is correct, but you can address your concerns about maintainability with a CSS preprocessor, like LESS. These tools support much more advanced logic while still compiling down to lean and mean CSS.
With LESS, specifically, you could create a rule like this:
#PhotoCaptionFontStyle: italic;
/* Reverses the font style of child EM's if the parent value is italic */
.reverse-em(#parentFontStyle) when (#parentFontStyle = italic){
EM {
font-style: normal;
}
}
.photo-caption {
font-style: #PhotoCaptionFontStyle;
/* make child EMs normal if #PhotoCaptionFontStyle is "italic" */
.reverse-em(#PhotoCaptionFontStyle)
}
(for inspiration. not tested. see variables and guarded mixins)
If #PhotoCaptionFontStyle is italic, then the compiled result would look something like this:
.photo-caption {
font-style: italic;
}
.photo-caption EM {
font-style: normal;
}
If you switched #PhotoCaptionFontStyle back to normal, you'd end up with something like this:
.photo-caption {
font-style: normal;
}
/* ".photo-caption EM" is never generated
because of the guard condition */
I think the best solution is something like this:
<p class="photo-caption italic">Lorem <em>ipsum</em></p>
.italic em {font-style: normal;}
I'm having a hard time trying to limit the size of the app by reducing the unicode range of my fonts.
I've tried several different combinations, the error is the same no matter what range I put there:
-invalid Unicode range '005A'
Where 005A can be anything, if I do this:
unicodeRange: U+0020-007E;
The error is this: -invalid Unicode range '007E'
I've tried different fonts, Arial, Helvetica, Century... Same error in everyone, all the unicode ranges throw errors in the CSS file.
Any ideas what could be wrong? I've read the documentation from Adobe, not sure what else to do.
Here is a CSS file as example - it works well for me in an iOS/Android card game app (where I need card suits and cyrillic characters):
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face {
src: url("/assets/fonts/arial.ttf");
fontFamily: embFont;
embedAsCFF: false; /* required for StyleableTextField */
unicodeRange:
U+0020-U+0040, /* Punctuation, Numbers */
U+2660-U+2666, /* Card suits */
U+0041-U+005A, /* Upper-Case A-Z */
U+0061-U+007A, /* Lower-Case a-z */
U+0410-U+0451; /* Cyrillic */
}
s|LabelItemRenderer {
fontFamily: embFont;
}