Is This Font: Shorthand Property Syntax Valid? (My Reading of The Spec Says Yes, But Half of My Installed Browsers Disagree.)

Is this font: shorthand property syntax valid? (My reading of the spec says yes, but half of my installed browsers disagree.)

I think the issue is with the "inherit" addition to your value.

Per the specs:

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
| caption
| icon
| menu
| message-box
| inherit

I think the bold section I listed above is one option, and "caption", "icon", "menu", "message-box", and "inherit" are the remaining options.

In short, try: font: bold 10px/13px

Update:

It appears webkit has an outstanding bug report on this very problem. Not sure about firefox. (https://bugs.webkit.org/show_bug.cgi?id=20181)

Also, as someone in the ticket mentions, the 2.1 spec addresses this:

"Shorthand properties take a list of subproperty values or the value 'inherit'. One cannot mix 'inherit' with other subproperty values as it would not be possible to specify the subproperty to which 'inherit' applied. The definitions of a number of shorthand properties did not enforce this rule: 'border-top', 'border-right', 'border-bottom', 'border-left', 'border', 'background', 'font', 'list-style', 'cue', and 'outline'."

http://www.w3.org/TR/CSS21/changes.html#q142

How is `outline: inherit 0` interpreted?

It is ignored. This is current browser practice and the intended principle in CSS: for a shorthand notation like outline, the keyword inherit is allowed as a value (making all the sub-properties inherited), but not in conjunction with any other value. The reason is rather obvious: otherwise the value would not have an unambiguous interpretation. In the value inherit 0, the value 0 can only be a value for outline-width, but inherit could be a value for outline-style or outline-color.

The principle is mentioned in an appendix of the CSS 2.1 specification, at C.3.1. In theory, appendix C is an informative description of changes, not normative, and here it does not reflect an actual change. That is, this was goofed up: the intent was described, but normatively CSS 2.1 does not have this principle and would regard outline: inherit 0 as valid (but the W3C CSS Validator rejects it). Cf. to Is this font: shorthand property syntax valid? (My reading of the spec says yes, but half of my installed browsers disagree.) (which deals with the same issue regarding the font shorthand).

If you want all outline properties to be inherited but width set to zero (which would be somewhat odd), you need two declarations

outline: inherit;
outline-width: 0;

How so I set an inline span to have the same height when containg text in both Chrome and Firefox?

I noticed that the codes in the stackoverflow answers look similar to your provided image (2nd one). If you put this CSS line-height: 21px on the container .wmd-preview p, then a separation appears between the codes. So your problem could be solved by adding line-height to the container of those span.

Google Chrome update to 37 makes text look slightly bolder

I think this is just a bug in version 37 that prevents Chrome from rendering Segoe UI Light. See: https://code.google.com/p/chromium/issues/detail?id=408587

What's happening is that it can't render Segoe UI Light for whatever reason, so it goes to the next fallback font (Segoe UI), which it can render. That's why your text looks slightly bolder.

Can XSL-FO flip (mirror-image) characters?

If you are using AH Formatter, you could use axf:transform (see https://www.antennahouse.com/product/ahf65/ahf-ext.html#transformation), otherwise you probably have to do it as an SVG graphic.

Qt Designer Point Size drops to -1 when adding font-size in stylesheet

Get rid of it by either:

1. Editing the .ui file to remove the silly property value <pointsize>-1</pointsize>.

2. Restoring the point size to the default, non-overridden value - see the screenshot you provided, click on the "Point Size" field, then click on the little revert back-arrow that will appear there.

The stylesheets don't figure in this.

Bold text looks very different in different web browsers

A bold font would be a separate font file, not included in the main font (at least, not for TTF and OTF formats).

Monotype Corsiva does not have a bold variant, so if you try to embolden it, the operating system and/or the browser tries to fake it, with varying (but always less than ideal) results.

Short answer: don't do that.

Cheers,

Thomas

---

Related Topics