4

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

enter image description here

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Julien Savioz
  • 41
  • 2
  • Sounds like something you'd need to script... not sure what the performance hit would be like though. – Jeff Clarke Apr 30 '15 at 15:14
  • Thanks. I'm not very experienced with scripting, but that's something I could ask to our developers. Any idea of what the 'tag' could be or any existing selector for that? – Julien Savioz Apr 30 '15 at 15:33

1 Answers1

1

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>
Scott
  • 5,338
  • 5
  • 45
  • 70