Deciding on number style preferences in HTML/CSS (Choosing Between Uppercase and Lowercase Numbers)

Is it possible to leverage HTML/CSS to implement a font that automatically displays numbers in uppercase rather than lowercase? I'm faced with the challenge of managing client content which means I can't manually wrap all numbers in spans for styling. It would be great if there was a dynamic solution to achieve this effect.

The typeface I am using is "Tisa Sans Pro," where the default numbers have ascenders and descenders, whereas the uppercase version features lined-up numbers. The client specifically prefers the lined-up variation.

Appreciate any help on this matter! Thank you!

htmlcsstypography

Answer №1

When it comes to digits (numbers), there are uppercase and lowercase variants known as “lining numerals” and “oldstyle numerals” in the world of CSS and typography. You can choose between them using the font-feature-settings property, but only if the font you're using actually includes these variations (which is not always the case) and if the browser supports this feature. While modern browsers generally have good support for this, it's still important to include vendor-prefixed versions in your code. Here’s an example:

body {
   -moz-font-feature-settings: "lnum";
   -webkit-font-feature-settings: "lnum";
   font-feature-settings: "lnum";
}

Keep in mind that even if a font offers lining numerals, the above code may not work properly when using that font as a web font. This is because certain font formats (.eot, .woff, etc.) generated by the font editor might lack the necessary information for variant selection. Some font generators provide options to include this data, or even fixate on a specific variant like lining numerals exclusively, eliminating the need for additional CSS code.

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

Personalized 404 Error Page on Repl.it

Is it possible to create a custom 404-not found page for a website built on Repl.it? I understand that typically you would access the .htaccess file if hosting it yourself, but what is the process when using Repl.it? How can I design my own 404-not found p ...

javascripthtmlcsshttp-status-code-404replit

Steps to dynamically update a button's href based on the active status of a class

I am facing a challenge in using Js and Jquery to dynamically change the href of a button based on the presence of a specific class. I am relatively new to Javascript and unsure if I am approaching this problem in the best way. Any suggestions on how to re ...

javascripthtmljquery

Tips for creating a responsive layout to ensure that H2 achieves its optimal font size in a one-line DIV

Is there a way to ensure that an H2 headline fits within the width of a DIV element? I am looking for a solution where the font size of the H2 automatically adjusts to display its full text without overflowing or breaking into a second line inside the DIV ...

javascripthtmlcssdynamicresponsive-design

Stretch out single column content vertically in bootstrap for a uniform look

I've been struggling to make multiple buttons vertically stretch to fit the container, but I can't seem to remember how I achieved this in the past. I have experimented with various options outlined on https://getbootstrap.com/docs/4.0/utilities/ ...

javascripthtmlbootstrap-4

Struggling to Collaborate with External PHP File Leads to Garbled Results

Recently started learning PHP and I'm pretty sure I have it set up correctly with my local IIS as I was able to use it in a form on another local website. For this particular project, I have a basic HTML file structured like this: <!doctype html&g ...

phphtml

Tips for styling React Material-UI list items with fontAwesome icons and Tailwind.css

I would like to align the text of my list items to the left. Additionally, I want all the icons to be the same size as the envelope icon used in Gmail list item. Currently, my code looks like this: https://i.stack.imgur.com/9LNOs.png How can I achieve th ...

cssreactjsfont-awesomematerial-uitailwind-css

Out of the blue div, could you lend your assistance?

I have a code that displays 5 random images with corresponding text. My challenge is that I want to separate the text into another div so that I can add another function to it, while still keeping the images random with their corresponding text. <scr ...

javascripthtmlcss

What is the smoothest way to animate price changes as you scroll?

After searching online, I could only find a version for swift. The only keyword that resulted in a search was ScrollCounter. Is it possible to create this type of animation using CSS and HTML? If anyone knows of a helpful resource or example, please share ...

htmlcsscss-animations

What could be causing the bullet not to appear in Internet Explorer 6

It is visible in Firefox, but not in IE (specifically IE6). <style type="text/css"> li { list-style-type:disc; } </style> <div style="margin: 2px auto 15px; padding: 5px 0px; width: 480px; text-align: center;"> <ul style="margin: 0; ...

cssinternet-explorerhtml-lists

Having trouble getting a styled button to align properly with the text next to it

Usually I wouldn't reach out for help on a minor issue, but I've exhausted all my options. I've spent at least an hour attempting to solve this problem with vertical-align, padding adjustments, and more. It should be a simple fix. http://js ...

css

Tips for displaying a div briefly before loading the second page

Incorporating a div named ADD, I aim to successfully load a second page within the current one using ajaxload. The challenge lies in displaying a div for 4 seconds before loading the second page. How can this be achieved? Following the wait period, the sec ...

javascriptjqueryhtmlcss

What is the best way to implement word-wrap on ANTD Select's title and dropdown options in order to adjust the element's height?

I need my ANTD title/selected item to be on a separate row and adjust the height of the Select component. Here is the example I have been working on: https://codesandbox.io/s/basic-usage-antd-4-24-7-forked-8jzp29?file=/demo.js These are the specific styl ...

cssreactjsantdcss-modules

The validation process fails when the button is clicked for the second time

When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...

javascriptjqueryhtmlemail

Switch between animations triggered by a button

I am currently working on this code snippet: $(function(){ $("#modal-launcher, #modal-background, #modal-close").click(function () { $("#modal-content,#modal-background").toggle("slow"); return false; }); }); and here is the correspon ...

javascriptjqueryhtmlcss

Unable to wrap the strings from the database in a span element

I have a challenge where I need to enclose the first and last strings that represent the title and price of a product within a div using a span tag. These strings are dynamic, sourced from a database, and differ for each product. I have attempted to use th ...

javascripthtmljquerywrapper

QuickFit, the jQuery plugin, automatically adjusts the size of text that is too large

I have incorporated the QuickFit library into my website to automatically resize text. However, I am running into an issue where the text is exceeding the boundaries of its containing div with a fixed size. This is something I need to rectify. This is ho ...

javascriptjqueryhtmlcsstext

Tips for maintaining a stationary element with fluctuating height positioned at the bottom in React

I am trying to create a fixed element with dynamic height, meaning its size changes when the browser window is resized. You can see an example of what I'm talking about here: https://stackblitz.com/edit/react-yuqarh?file=demo.tsx This element acts li ...

javascriptcssreactjsmaterial-ui

Storing plotly and 3D images as an HTML file on my computer's hard drive

I am encountering an issue while attempting to save plotly images and 3D images in HTML format to my local drive. The error message below is preventing me from progressing further. Can you please assist me with this? Error: The figure_or_data positional a ...

pythonhtmlplotlydata-visualization

Incorporate a notification into the Windows notification center without it being visibly displayed on the desktop

I am currently developing an Electron application that includes a custom Notification feature. This feature involves html5 divs appearing and disappearing as necessary on a frameless, transparent, always-on-top window. Although the feature works well, I s ...

htmlnode.jsreactjswindowsnotifications

Ensure that FlexBox Columns have a height of 100% and vertically align their content

Having scoured through numerous questions and answers, I'm still stuck on why I can't achieve 100% height for certain flexbox columns. Specifically, trying to make the "Genre" column with one line of text match the height of the "Song & The A ...

cssflexbox