Open main menu
Home
Random
Recent changes
Special pages
Community portal
Preferences
About Wikipedia
Disclaimers
Incubator escapee wiki
Search
User menu
Talk
Dark mode
Contributions
Create account
Log in
Editing
Small caps
(section)
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
=== CSS === Small caps can be specified in the style sheet language [[CSS]] using {{code|font-variant: small-caps|CSS}}. For example, {|class=wikitable |+Basic small caps (CSS2) |- ! style=width:55% | Code !! Render |- |{{code|lang=html|code=<span style="font-variant: small-caps">Jane Doe</span>}} |<span style="font-family:'Libertinus Serif','Linux Libertine','Linux Libertine G','Georgia Pro',Georgia,Times,serif;font-variant: small-caps">Jane Doe</span> |- |{{code|lang=html|code=<span style="font-variant: small-caps">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</span>}} |<span style="font-family:'Libertinus Serif','Linux Libertine','Linux Libertine G','Georgia Pro',Georgia,Times,serif;font-variant: small-caps">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</span> |} Since CSS styles the text, and no actual case transformation is applied, readers are still able to copy the normally-capitalized plain text from the web page as rendered by a browser. [[CSS3]] can specify OpenType small caps (given the <code>smcp</code> feature in the font replaces glyphs with proper small caps glyphs) by using <syntaxhighlight lang=css inline>font-variant-caps: small-caps</syntaxhighlight>, which is the recommended way, or <syntaxhighlight lang=css inline>font-feature-settings: 'smcp'</syntaxhighlight>, which is the most widely used method {{as of|May 2014|lc=yes}}. For the latter case, if the font does not have small-cap glyphs, lowercase letters are displayed. {|class=wikitable |+Small caps (CSS3) |- ! style=width:55% | Code !! Render |- |{{code|lang=html|code=<span style="font-variant-caps: small-caps">Jane Doe</span>}}<br>technically identical to {{code|lang=css|font-variant: small-caps}} |<span style="font-family:'Libertinus Serif','Linux Libertine','Linux Libertine G','Georgia Pro',Georgia,Times,serif;font-variant-caps: small-caps">Jane Doe</span> |- |{{code|lang=html|code=<span style="font-feature-settings: 'smcp'">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</span>}} |<span style="font-family:'Libertinus Serif','Linux Libertine','Linux Libertine G','Georgia Pro',Georgia,Times,serif;font-feature-settings: 'smcp'">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</span> |} {{As of|June 2023}}, CSS3 can specify petite caps by using <syntaxhighlight lang=css inline>font-variant: petite-caps</syntaxhighlight><ref name="CSSFontLevel3">{{Cite web |date=2018-09-20 |title="W3C Recommendation: CSS Fonts Module Level 3" |url=https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#font-variant-caps-prop |access-date=2023-06-09 |publisher=W3.org}}</ref> or <syntaxhighlight lang=css inline>font-feature-settings: 'pcap'</syntaxhighlight>. For the latter case, if the font does not have petite cap glyphs, lowercase letters are displayed. For the first case, small caps are substituted. {|class=wikitable |+Petite caps (CSS3) |- ! style=width:55% | Code !! Render |- |{{code|lang=html|code=<span style="font-variant-caps: petite-caps">Jane Doe</span>}}<br>technically identical to {{code|lang=css|font-variant: petite-caps}} |<span style="font-family:'Libertinus Serif','Linux Libertine','Linux Libertine G','Georgia Pro',Georgia,Times,serif;font-variant-caps: petite-caps">Jane Doe</span> |- |{{code|lang=html|code=<span style="font-feature-settings: 'pcap'">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</span>}} |<span style="font-family:'Libertinus Serif','Linux Libertine','Linux Libertine G','Georgia Pro',Georgia,Times,serif;font-feature-settings: 'pcap'">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</span> |}
Edit summary
(Briefly describe your changes)
By publishing changes, you agree to the
Terms of Use
, and you irrevocably agree to release your contribution under the
CC BY-SA 4.0 License
and the
GFDL
. You agree that a hyperlink or URL is sufficient attribution under the Creative Commons license.
Cancel
Editing help
(opens in new window)