The functionality of Small Caps is not supported by Twitter Bootstrap when using Chrome browser

I am working with a very basic markup

<h1>
    <a href="#">
        My Title
    </a>
</h1>

and I have this CSS applied

h1 {
   font-variant: small-caps;
}

You can see the result on this jsfiddle link.

The problem arises when using Twitter Bootstrap. The text appears without the font-variant styling being applied.

I am certain that Bootstrap is causing this issue, as removing it restores the expected text rendering. Any suggestions or workarounds for this?

This is tested on Chrome version 26.0.1410.64

Bootstrap ON

Bootstrap OFF

csstwitter-bootstrap

Answer №1

To resolve the issue, you can try adjusting the following CSS property:

text-rendering: auto;

Check out the updated jsFiddle link below for more details. http://jsfiddle.net/XP9jQ/7/

The problem stemmed from a conflicting rule within Twitter Bootstrap:

h1, h2, h3, h4, h5, h6 { text-rendering: optimizelegibility; }.

It seems that using text-rendering: optimizelegibility; causes issues with small-caps in Google Chrome.

Answer №2

Take a look at this discussion thread.

An interesting discovery is that the issue lies with Chrome. It seems that applying font-variant: small-caps; to a tag within an H# tag does not work as expected due to limitations in Chrome's rendering capabilities.

According to reports, Chrome currently has difficulty recognizing small-caps on both H# tags and their nested elements. Visit this updated fiddle example for a visual demonstration of this issue.

To address this problem, you may want to consider styling a <span>, <p>, or <div> element to mimic the appearance of an <h1> tag. By doing so, Chrome will be able to properly display your small-caps style.

Update:

After reviewing other comments, it appears that setting text-rendering: auto can resolve Chrome's rendering inconsistencies. Check out this revised jsFiddle for an illustration of this workaround. Credit goes to Martin for sharing this solution.

Answer №3

Using the CSS property font-variant: small-caps may not always yield genuine small caps in web browsers. Instead, this styling technique often results in simulated small caps by scaling down regular uppercase letters. This can be observed in instances where the stroke width of the "small caps" appears disproportionately smaller than that of normal capital letters.

Despite potential technical improvements to address browser compatibility issues with fake small caps, the fundamental challenge persists: achieving authentic small caps requires access to typefaces specifically designed with small caps, implementation of additional markup, utilization of complex CSS rules (such as font-feature-settings) tailored for small caps, and reliance on modern browsers capable of supporting these advanced CSS features. Unfortunately, many standard fonts installed on users' devices do not include true small caps.

Therefore, it is advisable to explore alternative typographic elements instead of relying solely on small caps for text enhancement.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the Bootstrap grid system to dynamically adjust column width based on specific conditions

When working with HTML and bootstrap (3.7) CSS, I often come across this issue: <div class="row"> <div class="col-xs-6">Stretch ME!</div> <div class="col-xs-6">Conditional</div> </div> Sometimes the "Conditional" d ...

csstwitter-bootstrapflexbox

A combination of Webpack CSS modules with Angular templates

I am currently trying to integrate webpack CSS modules into my angular/ionic project. I'm wondering if it's possible for the CSS module class definitions to be correctly appended to an external template instead of an inline template. When I embe ...

cssangularjswebpack

Resizing an image that is being pulled from a database

I am currently working on a challenging database project that seems to have hit a minor cosmetic roadblock. The database I'm dealing with loads profiles into arrays for display using a PHP while loop, making it easy to display content and allow for a ...

phpcssimageresize

Is it possible to absolutely position an element using its own bottom edge as a reference point?

Looking to achieve precise positioning of an element just off the top of the screen, specifically a sliding menu. Utilizing position: absolute and top: 0px is straightforward, but this aligns the element based on its top edge. Is there a way to achieve th ...

csscss-positionabsolute

JavaScript providing inaccurate height measurement for an element

Upon loading the page, I am trying to store the height of an element. To achieve this, I have utilized the jQuery "ready" function to establish a callback: var h_top; var h_what; var h_nav; $(".people").ready(function() { h_top = $(".to ...

javascripthtmljquerycss

Tips on making Material-UI Drawer compress other content when it is open

Seeking assistance from those familiar with CSS and Material UI! I'm currently working on implementing a Material UI Drawer component that doesn't just slide out over the top of the page content, but actually causes the page content to adjust aro ...

cssreactjsmaterial-ui

`Considering various factors to alter class pairings`

I have defined a few style classes in my stylesheet as shown below: .left-align{ /* some styles here */ } .right-align{ /* some styles here */ } .validate-error{ /* some styles here */ } Depending on the type of data, I need to align the content ei ...

htmlcssangularjsvalidationng-class

Moving images displayed on a webpage

Is animating 5 pictures/photos a simple task? Take a look at this example: Which programming languages are recommended for achieving this effect? Thank you Tea ...

htmlcss

Trouble encountered in aligning two DIVs in a horizontal position

I have been through numerous discussions on the same problem, but none of the solutions seem to work in my case. I am currently working on a section of my website that has 3 small boxes, each containing an image on top and text below. The issue arises when ...

csshtml

Activate the radio button with jQuery when the event occurs

I have been experimenting with using HTML and JS along with the functionality provided by bootstrap-switch.org to toggle between two groups of radio buttons within a form. However, I am encountering difficulty in setting the first radio button in the secon ...

jquerytwitter-bootstrap

Solution for repairing the display location button on Android within a React Native Map

I am facing an issue with the Location Button in my React Native Maps app. When the app is opened for the first time and the map is rendered, the button disappears. However, if I close the app but leave it running in the background, upon reopening the app, ...

javascriptcssreactjsreact-nativereact-native-maps

Is there a way to trigger both the link and the div element simultaneously?

Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...

htmlcssbuttonhover

What causes the "v-col" width to suddenly alter after adding the "bg-red rounded" class?

I'm struggling to organize the data into blocks using Vuetify. When I apply the "bg-red rounded" class to the "v-col", it alters the width of the column, resulting in an undesired grid structure. Here is the template section of my Vue file. Some data ...

cssvue.jsvuetifyjs3

Place an element in a higher position than a slideshow

I recently encountered an issue where I was trying to place a png image above my slideshow. Despite trying various solutions, the image always appeared behind or on top without transparency. Based on the erratic display, it seems like the problem might be ...

jqueryhtmlcsscss-positionslideshow

What steps can I take to prevent the odd gaps from appearing in my horizontal flexbox gallery?

Take a look at this code: .gallery { display: flex; overflow-x: auto; resize: both; background-color: rgb(200, 200, 200); padding: 10px; height: 200px; } .item { display: flex; flex: 0 0 auto; max-width: 100%; } .item img { max-w ...

css

Alter the color of the text within the `<li>` element when it is clicked on

Here is a list of variables and functions: <ul id="list"> <li id="g_commondata" value="g_commondata.html"> <a onclick="setPictureFileName(document.getElementById('g_commondata').getAttribute('value'))">Variable : ...

javascripthtmlcss

How to effectively manage an overflowing navigation bar

I am currently facing a challenge with the main navigation bar on my website, specifically with how it handles an overflow of links on smaller screen resolutions. I have attempted to adjust the height of the navigation bar at smaller media queries, but I&a ...

phpjqueryhtmlcss

Adjusting the width of the body container in a 2-column layout with menu padding is causing gaps to appear on the right side of

I'm having trouble getting my body div to fill the width of the page and align with the right side of my sidebar. Whenever I add padding to the sidebar, it creates blank space on the right that I can't seem to get rid of. Here is the code I am us ...

cssxhtml

Personalized Firefox Scrollbar - Rounded Corners

I have successfully customized the default CSS of browser scrollbars for Chrome and Edge, but I am facing issues with Firefox. Is there a way to sync the scrollbar styling in Firefox with Chrome and Edge? Currently, I am unable to apply border radius to th ...

htmlcssangularfirefoxscrollbar

Center alignment is not possible for the Div element

Problem Every time I attempt to implement the following code (outlined below), the div only appears centered when using width: 100px;. <div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; mar ...

javascripthtmlcsscenter