reverse italics

view source

Italicize a section of text while de-italicizing those elements that would normally be italicized — such as , <cite>, and .

use-name

scut-reverse-italics

type

mixin, with default-values placeholder

arguments

$elements

default

false

A list (not comma separated) of CSS selectors for elements that you do not want italicized (, <cite>, and  are already taken care of: see below). Wrap your selectors in quotes.

This is common typographical practice: In non-italicized text, italics provide mild stress; but in an italicized passage, it is the non-italicized text that is stressed. (Everything is relative and nothing means anything.)

The elements , <cite>, and , which browsers typically italicize, are by default de-italicized. To de-italicize more elements, include their selectors in a list that you pass to the mixin.

example

HTML

<p class="eg-reverse-italics-default">DEFAULT:  <em>Some &lt;em&gt; text</em> sit amet, consectetuer adipiscing elit.
  <cite>Some &lt;cite&gt; text</cite>, aenean commodo ligula eget dolor.
  <strong>Some &lt;strong&gt; text</strong> Cum sociis natoque penatibus
  <i>some &lt;i&gt; text</i> et magnis dis parturient montes, nascetur ridiculus mus
  <b>some &lt;b&gt; text</b>.
  <span class="no-italics">And a &lt;span&gt; with the classname "no-italics".</span>
</p>
<p class="eg-reverse-italics-variant">VARIANT:
  <em>Some &lt;em&gt; text</em> sit amet, consectetuer adipiscing elit.
  <cite>Some &lt;cite&gt; text</cite>, aenean commodo ligula eget dolor.
  <strong>Some &lt;strong&gt; text</strong> Cum sociis natoque penatibus
  <i>some &lt;i&gt; text</i> et magnis dis parturient montes, nascetur ridiculus mus
  <b>some &lt;b&gt; text</b>.
  <span class="no-italics">And a &lt;span&gt; with the classname "no-italics".</span>
</p>

SCSS

.eg-reverse-italics-default {
  @include scut-reverse-italics;
  // or @extend %scut-reverse-italics;
}
.eg-reverse-italics-variant {
  @include scut-reverse-italics("strong" "b" ".no-italics");
}

compiled CSS

.eg-reverse-italics-default {
  font-style: italic;
}
.eg-reverse-italics-default em, .eg-reverse-italics-default cite, .eg-reverse-italics-default i {
  font-style: normal;
}

.eg-reverse-italics-variant {
  font-style: italic;
}
.eg-reverse-italics-variant em, .eg-reverse-italics-variant cite, .eg-reverse-italics-variant i, .eg-reverse-italics-variant strong, .eg-reverse-italics-variant b, .eg-reverse-italics-variant .no-italics {
  font-style: normal;
}

Result

DEFAULT: Some text sit amet, consectetuer adipiscing elit. Some <cite> text, aenean commodo ligula eget dolor. Some text Cum sociis natoque penatibus some text et magnis dis parturient montes, nascetur ridiculus mus some text. And a with the classname "no-italics".

VARIANT: Some text sit amet, consectetuer adipiscing elit. Some <cite> text, aenean commodo ligula eget dolor. Some text Cum sociis natoque penatibus some text et magnis dis parturient montes, nascetur ridiculus mus some text. And a with the classname "no-italics".