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

Experience a seamless transition to the next section with just one scroll, allowing for a full

I've been attempting to create a smooth scroll effect to move to the next section using Javascript. However, I'm encountering issues with the window's top distance not being calculated correctly. I'm looking to have the full screen div ...

javascriptjqueryhtmlcss

Creating Dynamic Visibility in ASP.NET Server Controls: Displaying or hiding a textbox based on a dropdown selection

Is there a way to dynamically show/hide a textbox or an entire div section based on a user's selection from a dropdown menu? Can this be achieved using client-side HTML controls instead of server controls? Would utilizing jQuery provide the best solut ...

javascriptjqueryasp.netcsshtml

Tips for preventing images from stretching the width and height of my HTML

I am facing an issue with my SVG files positioned as "absolute" on my page. When they are close to the corners of the page, they end up expanding the width of my Container element (using Material UI React). I have tried setting "maxWidth":"100vw" on the ...

cssreactjsimagewidth

Getting the Value of my Latest Selection in Bootstrap Multiselect

I have a question regarding the following code snippet: <select name="department" id="department-list" class="form-control" onChange="getTeams3(this.value);" multiple> <option value="MONGOOSEAHOY" selected>All departments</option> &l ...

jquerytwitter-bootstrap

AngularJS combined with jVectorMap allows for the seamless rendering of small interactive

I am facing a similar issue to one discussed here, but with some minor differences. Initially, my map loaded without any problem on the site. However, after adding Angularjs to the site, I noticed a 'small' map issue. It seems like a simple code ...

javascriptjquerycssangularjsjvectormap

What causes Google fonts to fail on Heroku but succeed when used locally?

I am currently using express and heroku to host a prototype of a landing page. While the webpage functions properly when running locally, I encounter font loading issues when accessing it on heroku most of the time... The CSS files are located under /pub ...

htmlcssexpressherokugoogle-font-api

What about employing the position:fixed property to create a "sticky" footer?

I've come across various methods for creating a sticky footer, such as Ryan Fait's approach found here, another one here, and also here. But why go through the trouble of using those techniques when simply applying #footer{position:fixed; bottom ...

htmlcssfootersticky-footer

What is the best way to ensure a grid remains at 100% width when resizing a browser window?

Within the div element, I have two child divs. One has the class col-md-2 and the other has the class col-md-10.Check out a sample view here In the image provided, the div containing hyperlinks (Database edit, invoice, preview) is not taking up 100% width ...

htmlcsstwitter-bootstrap

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7

Having trouble getting the JavaScript slider to animate

My code works perfectly in Codepen but when I try to implement it on my website, it shows as a static image. You can view the code here: https://codepen.io/anon/pen/zPMKpv I'm using the exact same code on my website located at: Does anyone have any ...

javascripthtmlcss

scalable and circular picture displayed within a bootstrap-5 card

Is there a way to resize and round the image within a bootstrap-5 card? I am unsure of how to achieve this using either bootstrap-5 or css3. My goal is to have the image appear smaller and rounded in the center of the card. Sample Code: < ...

cssbootstrap-5

Dynamic container elements (already arranged)

After creating a marksheet generator, I noticed that the divs positioned over an image on the resulting page are not responsive when trying to print. The print preview ends up looking strange and distorted. How can I make these already positioned divs resp ...

htmlcssresponsive

Integrate stylish checkbox design into a form in Rails

I discovered some beautiful css styles for checkboxes that I would like to use instead of the regular ones. You can find these styles here: . Could someone guide me on how to implement this change? This is the code snippet from the form: <div class=" ...

cssruby-on-railstailwind-css

Looking to adjust the background-image size of a table cell (td) upon clicking a specific

I have a website where I would like to display logos of different games with links attached to them. I have managed to adjust the size of the image on hover, but now I am looking for a way to keep the size bigger after clicking on the link. Is there a simp ...

javascripthtmlbackgroundcss

When hovering over nav bar links, shadows are not displayed

When hovering over the navbar links, I am able to change their color but a shadow at the bottom is missing. Is there a way to add a shadow at the bottom like it had before when not hovered? Visit this link for more information ...

htmlcss

Adjust the transparency of a separate image within a different container by hovering over another image container

Is my goal too complex to achieve? I am attempting to create a hover effect where the opacity of artwork1 and button1 changes simultaneously when hovered over. However, I am having trouble properly labeling my elements and getting them to interact as inten ...

javascriptjquerycsshover

Ways to avoid divs overlapping on a mobile device?

If you visit this page: The recent searches section displays correctly on a computer, but it overlaps with the footer when viewed on an iPhone 6. What steps can I take to avoid this issue? ...

htmlcss

What is the process for dynamically populating a select dropdown based on the selection made in another select dropdown?

I need to dynamically populate the second select box based on the option selected in the first select box. Here's what I have tried so far, but it doesn't seem to be working as expected. HTML: <form id="step1"> <p> Creat ...

javascriptjqueryhtmlcssweb

Incorporate the Bootstrap classes to arrange the divs side by side, ensuring that any surplus space is utilized effectively

Having implemented a layout with two images and two paragraphs side by side, everything seemed to be working fine until I encountered an issue when setting both images' height to 400px. The goal was for the paragraph to adjust its size based on conten ...

htmlcssbootstrap-5

Creating a dynamic height sticky sidebar and footer in Bootstrap 5 using CSS/HTML

Looking to implement a sticky sidebar feature with a header and footer that remain visible while the middle content scrolls. The overall height of the page will vary, so I plan to use Bootstrap 5 grid for structuring. <!DOCTYPE html> <html la ...

htmlcssbootstrap-5