How to Parse CSS Font Shorthand Format

How to parse CSS font shorthand format

Here's a "temporary DOM element and using jquery's css() function" solution:

http://jsfiddle.net/thirtydot/tpSsE/2/

var $test = $('<span />');
$test.css('font', 'bold italic small-caps 1em/1.5em verdana,sans-serif');

alert($test.css('fontWeight'));
alert($test.css('fontStyle'));
alert($test.css('fontVariant'));
alert($test.css('fontSize'));
alert($test.css('lineHeight'));
alert($test.css('fontFamily'));

​

regex to parse any css font

Answering my own question:

/^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\"\sa-z]+?)\s*$/i

which separates to:

var       parts = rx.exec( str )
  , fontStyle   = parts[1] || 'normal'
  , fontVariant = parts[2] || 'normal'
  , fontWeight  = parts[3] || 'normal'
  , fontSize    = parts[4]
  , lineHeight  = parts[5]
  , fontFamily  = parts[6]
  ;

And yes, I realize that's insane

Parsing CSS in JavaScript / jQuery

There is a CSS parser written in Javascript called JSCSSP

Parse a CSS file with PHP

Here is a quick and dirty standalone hack using regex:

$input = '
#stuff {
    background-color: red;
}

#content.postclass-subcontent {
    background-color: red;
}

#content2.postclass-subcontent2 {
    background-color: red;
}
';

$cssClassName = 'postclass';
preg_match_all('/(#[a-z0-9]*?\.?'.addcslashes($cssClassName, '-').'.*?)\s?\{/', $input, $matches);
var_dump($matches[1]);

Results in:

array(2) {
  [0]=>
  string(29) "#content.postclass-subcontent"
  [1]=>
  string(31) "#content2.postclass-subcontent2"
}

Import html fonts and their style variations?

This is what you have to do:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: /* links to the Regular files */;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: /* links to the Bold files */;
}

Notice how the same font name is used in both @font-face rules. Now the browser knows that the font "Roboto" exists in two variants. The browser will automatically choose the best variant based on your CSS. So, for example:

div {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}

Here the browser chooses the Bold font file. It's all automatic. You just have to make sure that you set up the @font-face rules correctly.

Setting the code tag as the default font style for a class

An approach that works in practice on current browsers, but with no guarantee of working universally:

.codelike { font-family: monospace; }

There is no way of knowing, in CSS, which font a browser uses by default for code elements, or for pre elements (it is not clear which one you mean). In practice, though, browsers seem to use the same font as they use to implement the generic font name monospace. But this is not a requirement, and they might well use something else, and different font for pre than for code.

Note that if you put any font name before the generic font name, as you normally should when writing a style sheet, it will break this idea. Different browsers have different default monospace fonts, and this can often be changed by the user.

On the other hand, if you just want to have the same monospace for code, pre, and your class, that’s easy, e.g.

code, pre, .codelike { font-family: Consolas, Courier New, monospace; }

Note that browsers by default usually apply reduced font size for elements like code and pre, presumably to compensate for the generally larger size of characters in monospace fonts than in other fonts (when using the same font size). It is not possible to describe this exactly in CSS, as it is browser-dependent and partly undocumented, but it can easily be overridden if desired, e.g.

code, pre, .codelike { font-size: 100%; }

When a CSS property can have multiple values, are those values always separated by whitespaces?

The technical answer to your question is that it depends entirely on the property itself.

But generally, yes, whitespace is used to separate different components of a property value in CSS.

As you've seen in the font-family property however, the value that it takes is a comma-separated list of fonts (commonly called a font stack). The fact that it uses a comma as a delimiter is defined solely by the specification for that property, see CSS2.1, section 15.3:

The property value is a prioritized list of font family names and/or generic family names. Unlike most other CSS properties, component values are separated by a comma to indicate that they are alternatives:

body { font-family: Gill, Helvetica, sans-serif }

And CSS Fonts level 3, section 3.1:

Unlike other CSS properties, component values are a comma-separated list indicating alternatives.

Whitespace is acceptable either in front of the comma or behind it, or both. It is not significant and will not alter the meaning of the property value. The convention that is shown in the W3C specs is a single space after the comma. The page you link to is W3Schools which may have its own conventions (which in fact it apparently does not — even its own examples aren't consistent in the use of whitespace).

Indeed, even the font property, despite being a shorthand, has a custom syntax: in order to specify line-height, font-size has to be specified followed by a forward slash, which means, for example, font: 12px/1.5 is equivalent to font-size: 12px; line-height: 1.5. See this answer.

But again, there is no definite all-encompassing answer to what character is used as a delimiter in a property value. Each CSS property has its own grammar of possible values which is always spelled out in its respective specification.

---

Related Topics