Feature request: font-feature-settings mixin

[kristerkari]

The font-feature-settings CSS property allows control over advanced typographic features in OpenType fonts.

MDN article: https://developer.mozilla.org/en/CSS/-moz-font-feature-settings

Another article by Elliot Jay Stocks: http://elliotjaystocks.com/blog/stylesets/

Browser support: http://caniuse.com/#search=Font%20feature%20settings

[yatil]

That would be useful!

[ghost]

I'm surprised this is still open, that would be incredibly useful to have though.

[sininger]

I'm not sure if anyone still needs this but I wrote this quickly today as needed in compass.

@mixin font-feature-settings( $value, $number, $moz: $experimental-support-for-mozilla, $webkit: $experimental-support-for-webkit, $o: $experimental-support-for-opera, $ms: $experimental-support-for-microsoft, $khtml: $experimental-support-for-khtml, $official: true,$property:font-feature-settings){ @if $webkit and $experimental-support-for-webkit { -webkit-#{$property}: quote($value); } @if $khtml and $experimental-support-for-khtml { -khtml-#{$property}: quote($value=$number); } @if $moz and $experimental-support-for-mozilla { -moz-#{$property}: quote($value=$number); } @if $ms and $experimental-support-for-microsoft { -ms-#{$property}: quote($value); } @if $o and $experimental-support-for-opera { -o-#{$property}: quote($value); } @if $official {

{$property}: quote($value); } }

Using: @include font-feature-settings(liga, 1);

Rendered This (these are the only 3 I have enabled within compass): -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; font-feature-settings: "liga";

[pudgereyem]

I too would like to see Compass support this feature. In the meantime, I'm using my own mixin for this; https://gist.github.com/pudgereyem/8743542

[mirisuzanne]

Can someone submit a patch on the master branch, using the new browser-support module? I'd be happy to review and help get that merged in.

[pudgereyem]

@ericam I would love to submit a patch. But since this would be my first contribution to compass, I'm not sure if I would write proper code or not. The mixin I use (above) makes use of the experimental mixin. What about the new browser-support module? Thanks.

[mirisuzanne]

Even better. :) I'd love to help get more people comfortable with contributing. You can read through the new support module or see the beta documentation for it, but I find it easiest to understand by looking at existing code.

• Set the "threshold" to either "critical" (legacy browsers might break) or "graceful" (legacy browsers will look ok, even without feature support).
• Set a default, if there's a common use-case. Use the set-arglist-default function to apply your default to a variable argument (like your $settings...).
• Use the prefixed-properties mixin instead of experimental. The first argument is the caniuse name of the feature (taken from the URL). In this case, that should be "font-feature". The second argument is the threshold setting, and the third is the actual user values.

Once you have that working, you can follow the instructions for contributing — such as adding documentation and tests. Again, I'll be happy to help if you have questions along the way.

[pudgereyem]

Awesome! Thanks for the instructions @ericam. I will do exactly that as soon as I'm done with my current project (deadline in 2 days).

[nmabhinandan]

I'd love to have this feature.