Managing the character ß using the CSS property "font-variant:small-caps"

Currently, I am utilizing the CSS property font-variant: small-caps; for certain elements like <h1>, <h2>, ...

However, in the German language, there is no uppercase equivalent for the special character "ß" (sharp s). ("ß" never appears at the start of a word).

According to German orthography rules, when using uppercase or small caps, the "ß" must be substituted with "ss". It's puzzling why browsers do not automatically handle this.

An author writing CSS may not always know if their text will be displayed in uppercase or lowercase. I am seeking a CSS declaration that automatically replaces "ß" with "ss", though I'm doubtful such a declaration exists.

Any recommendations?

cssspecial-characterssmallcaps

Answer №1

This is a fascinating topic that arose in 2007 when there was a proposal to introduce an uppercase variant of the Unicode character (http://std.dkuug.dk/jtc1/sc2/wg2/docs/N3227.pdf). This proposal was successful and the uppercase variant made its way into the 2008 Unicode set as U+1E9E (ẞ):

ẞ // uppercase
ß // lowercase

Despite this development, a small-caps equivalent does not currently exist.

"Capital Esszet" is not utilized in any official orthography worldwide, and therefore, no phonetic alphabet includes its small-capital form. As a result, a specific Unicode codepoint for it does not exist. [source]

A Creative Solution

By using text-transform:uppercase, "ß" (the regular Eszett) can be converted into "SS" (two S characters). Conversely, text-transform:lowercase converts "ẞ" (the Unicode uppercase) back into "ß" (the regular Eszett).

To address the lack of font-variant:small-caps, a workaround involves combining text-transform:uppercase with a reduced font size:

<p class="small-caps">abcß</p>

.small-caps {
    text-transform:uppercase;
    font-size:75%;
}

You can view all the possibilities in action in this JSFiddle demo: http://jsfiddle.net/m8rwa/

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

Consistent padding applied to navigation bar links with a set width limit

Having some trouble with the navbar on a project I'm currently working on. Struggling to achieve consistent padding for each link and maintain a fixed width for the navbar. Despite multiple attempts, I haven't been successful in achieving equal p ...

jqueryhtmlcssnavbar

Tips for creating a responsive iframe without relying on aspect ratio assumptions

Is there a way to create a responsive iframe without relying on a fixed aspect ratio? The width and height of the content are unknown until rendering. Keep in mind, using Javascript is an option. For instance: <div id="iframe-container"> <i ...

javascripthtmlcssiframeresponsive-design

What is causing the #wrapper element to not fully contain all of its content within?

I am struggling to figure out why the wrapper on this page is not properly wrapping the content. It's only 332px tall for some reason when it should be the height of the content, which is causing the footer to pull up to the top of the page. Could I b ...

htmlcsswrapper

Place numbers above the image in the top right corner or at the top of the image

I'm struggling to align an image with a number that updates on page load. I want the number to either be on top of the image or in the northeast corner (top right), but so far I can't get it to line up correctly. The best I've achieved is ha ...

htmlcssbootstrap-4

Place an element in relation to its initial position, ensuring that the x-coordinate is not set to 0

Is there a method to place an element in relation to its initial position, only excluding x=0 - meaning that the element is placed at its original vertical coordinate but sticks to the window's left edge? ...

htmlcss

What is the best way to rearrange the order of divs when the screen is being resized?

My task involves rendering a page with react-bootstrap on desktop, structured like this: <Row> <Col xs={12} md={8} className="a"> </Col> <Col xs={6} md={4} className="b"> </Col> <Col xs={6} md={4} className ...

htmlcssreactjs

When a child element is positioned absolutely, the div will not automatically adjust its height accordingly

I am trying to create an effect where my image overhangs outside of its containing div. I have positioned the image absolute and the parent container relative, but now the parent div does not resize to contain the image. How can I achieve this? Here is th ...

htmlcss

Utilize VueJS to remove a designated HTML div upon clicking the delete button

I'm having trouble with a delete button on my input fields. The goal is for the delete button to remove all related input fields when clicked, but it's not working as expected. HTML <div v-for="index in 10" class="form-group ro ...

javascripthtmlcssvue.jsfrontend

Using keyframes for flexbox animation in Safari

What could be causing the issue with flex keyframes not working in Safari while functioning properly in other browsers? <div class="a"> <div class="b"></div> </div> .a { height: 200px; display: flex; } .b { flex:0 1 50% ...

cssanimationsafariflexbox

Insert text within a span tag next to a picture

Greetings everyone, Here is the current structure I am working on: <div class="payment-option clearfix"> <span class="custom-radio pull-xs-left">...</span> <label style="display:inline;width:100%"> <span style="fl ...

htmlcsstwitter-bootstrap-3

What is the best way to make this CSS arrow see-through?

My goal is to achieve this desired outcome: https://i.sstatic.net/4eTpE.png Currently, I have the following (focusing only on the left element for now): https://i.sstatic.net/nUFp1.png I am struggling to make the left arrow transparent and I can't ...

htmlcss

Is it possible to adjust the ul width to match its parent's width using CSS?

Whenever I type in a search, a list is displayed. The issue arises on small devices where the width of the list exceeds that of the search input or its parent container, which should not happen. On small devices, it should always look like this: Example L ...

cssbootstrap-4

Enable divs to be interactively chosen

I have created two selectable divs that function like buttons. By using the left and right arrow keys, I am able to select one of the divs with this code: document.addEventListener("keydown", keyDownDocument, false); function keyDownDocument(e) { var k ...

javascripthtmlcss

Updating the CSS styles in the head tag dynamically: A step-by-step guide

Here is the HTML code I am working with: <!DOCTYPE html> <html> <head> <style> p{font-size:14pt;color:red;} </style> </head> <body> <div> <p cla ...

javascripthtmlcss

Unable to locate the element within the specified div using xpath or css selector

I have attempted to retrieve the output "January 27" using this code: task_offer_deadline = driver.find_element_by_xpath('//*[@id="table"]/div[2]/div/a/div[1]/span[2]/div/em').text The xpath was obtained from Google Chrome Console. Here is a sn ...

pythoncssseleniumxpathelement

What steps can I take to address the issue with the jquery dropdown?

I am struggling with implementing JavaScript functionality on my website. Specifically, I have a dropdown menu in the hamburger menu that is causing some issues. Whenever I click on the services option, the dropdown opens but quickly closes again. I'v ...

javascripthtmljquerycssnavbar

Discover the DIV element that contains the highest number of <p> tags by utilizing Simple HTML DOM

For a current project, I am delving into the world of using Simple HTML DOM parser in PHP. My task involves parsing the source code of a webpage that looks something like this- <html> ... ... <div id="1"> Some content here</div> <div ...

phphtmlcss

Removing from MySQL database results in PHP form not being shown

I'm having trouble figuring out why my form isn't showing up. Below is the code for PostDelete.php: <?php session_start(); $username=$_SESSION['uname']; // Process delete operation after confirmation if(isset($_POST["pid"]) &a ...

phphtmlcssbootstrap-4

The case of the elusive Firefox overflow: hidden glitch

Recently, I integrated an image slider into my web design and it displayed perfectly on Internet Explorer and Chrome. However, when viewed on Firefox, I encountered a strange problem where the images in the slider were being pushed towards the right side o ...

htmlcssfirefox

The styles are not being successfully applied to the Material UI Menu component within a React application

I recently started working with material-UI. I have a menu component that looks like this: <Menu classes={{ paper: css.paperMenu }} className={classNames({ [css.menuMarginTop]: true })} > .menuMarginTop { margin-top: 14px; } In ...

cssreactjsmaterial-ui