What is the reason for the lack of letter-spacing between a nested inline element and the next character that follows?

Upon reviewing the specifications for letter-spacing, it is evident that runs of atomic inlines (e.g. inline-block) are considered as a single character (http://www.w3.org/TR/css3-text/#letter-spacing):

For letter-spacing purposes, each consecutive run of atomic inlines (like images and/or inline blocks) is treated as a single character.

In my testing across various browsers (Chrome, Safari, Firefox, IE 9+10), this behavior does not seem to be consistent.

The code snippet below (http://codepen.io/caleb/pen/CqDfK):

<style>
    div { letter-spacing: 2em; }
    em { letter-spacing: normal; }
</style>
<div>
    a<em>em</em><em>em</em>bc
</div>

is displayed as:

a    ememb    c

Why isn't there an additional 2em of space between the emem and the b? Considering that emem is viewed as a single character.

Answer №1

It appears that the specification may not be fully implemented as indicated in your comment, though I cannot say for certain. I experimented with a modified version of the example provided in the specification (changed inner elements to em and adjusted sizes for clarity; modifications noted in brackets below)...

Given the markup

<P>a<LS>b<Z>cd</Z><Y>ef</Y></LS>g</P>

and the style sheet

LS [em] { letter-spacing: 1em; } 

Z [em > em] { letter-spacing: 0.3em; [changed to 3em in example] }

Y [em > em + em] { letter-spacing: 0.4em; [changed to 6em in example]} 

the expected spacing should be

a[0]b[1em]c[0.3em]d[1em]e[0.4em]f[0]g

However, when I tested it out on my own, the rendering did not match the explanation provided in the spec. It seems like the observed rule is that the preceding letter's letter-spacing value dictates the spacing following it. This interpretation could stem from this statement in the specification:

At element boundaries, the total letter spacing between two characters is given by and rendered within the innermost element that contains the boundary.

I am uncertain about this interpretation. If indeed the browsers are following the rule that the preceding letter determines the spacing, then this clarifies why there isn't additional spacing between the emem and the b mentioned in your question:

Is there a reason why there isn't an additional 2em of spacing between the emem and the b?

The lack of space is attributed to the letter before the b, which is in a letter-spacing: normal element resulting in zero width spacing after it. The reference stating...

For the purpose of letter-spacing, each consecutive run of atomic inlines (such as image and/or inline blocks) is treated as a single character

...might not directly impact this scenario. It simply suggests that "atomic inlines" act as one unit, and an em does not qualify as an atomic inline by default (refer to second paragraph of 9.2.2 in this spec). Therefore, in this instance, the placement of the g is determined by the width of the inline-block element, not solely by the position of the f occurring after the g, as the entire block functions as a unified entity.

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

Opacity of absolutely positioned elements

I am currently working on creating a popup box that will gray out the surrounding area. The problem I'm facing is that the opacity of the shadow div seems to be overriding that of the popup. I have tried changing the position from absolute to fixed an ...

Tips for ensuring proper function of bullets in glidejs

I am currently working on implementing glidejs as a slider for a website, but I am facing issues with the bullet navigation. The example on glidejs' website shows the bullets at the bottom of the slider (you can view it here: ). On my site, the bullet ...

How can you ensure that it selects a random number to retrieve items from an array?

I am experiencing an issue with some code I wrote. Instead of displaying a random object from the array as intended, it is showing the random number used to try and display an object. <html> <body> <h1>HTML random objects< ...

What could be causing my AJAX form to refresh the page upon submission?

I have been working on a basic Follow/Unfollow system, and although the functionality is working correctly in terms of inserting and deleting rows when following/unfollowing, I'm facing an issue where the page refreshes every time despite using e.prev ...

How can you delete using JavaScript by pressing the "Delete" key?

Is it possible to programmatically trigger the deletion of text on an HTML web page using JavaScript or jQuery? I am looking for a way to replicate the functionality of clicking the "Delete" button without requiring users to physically click on it. Inste ...

Getting started with html2canvas: A beginner's guide

So here's a seemingly simple question... I'm diving into new territory and stumbled upon http://html2canvas.hertzen.com with a straightforward tutorial. After successfully running the command npm install -g html2canvas, I hit a roadblock. Where e ...

Inquiring about paint-order support for HTML elements using @supports

For those looking to create boldly stroked texts in Firefox and Safari, using paint-order and text-stroke (or the prefixed -webkit-text-stroke) is the way to go. Here's an example: h1 { -webkit-text-stroke: 5px red; paint-order: stroke fil ...

It appears that the flex-grow property is not functioning as expected

I am working with a parent div and two children divs underneath it. I noticed that when I set the flex-grow property of the first child to zero, its width remains constant. However, if I add text to the second child, the width of the first child decreases. ...

Having trouble getting jQuery .click to trigger on a dynamically loaded button?

I'm having some trouble with my code. I have a list that loads dynamically with a button inside, and although I have set up jQuery to handle the click event, nothing is happening. Here's a snippet of the code: HTML: <ul id="cart"> ...

Display a symbol retrieved from the backend server

After receiving a response from the backend server for my Angular 2/4 application, I am presented with an attribute called "connectionStatus". This attribute indicates the status of a database connection, either as "UP" or "DOWN". In order to display this ...

The form submission button fails to function when the onsubmit function returns false

When submitting, I check two fields. If one of the two fields is checked, then I return true; otherwise, I return false. The issue I'm facing is that even when I check one of the checkboxes, the submit button does not seem to work (I use console.log() ...

Is there a way to determine the number of options required for a select tag to become scrollable?

Please review these two <select> elements: <select> <option>one</option> <option>one</option> <option>one</option> <option>one</option> <option>one</option> <option&g ...

What are the steps to execute a file on localhost using an HTML page?

Currently, I have an HTML file that leverages the Google Calendar API javascript to read the next event on my calendar. The functionality works flawlessly when manually inserting a specific URL in a browser address window, which triggers a GET request in a ...

"Enhance your website with a sleek Bootstrap navigation system featuring dividers and

Need help with creating a Bootstrap nav menu similar to this design made in Photoshop? Wondering about the best way to position the logo and create dividers between menu items like shown in this image. Here's the HTML code currently being used: & ...

The menuToggle feature works flawlessly on desktops after integrating my AngularJS module, but unfortunately, it is not functioning

I have successfully integrated autosuggestion using AngularJS material library into my web application. Everything seems to be working fine except for one issue. When I include ng-App="MyApp2", the menuToggle button stops functioning only on mobile devices ...

What steps should I take to ensure that the content within a div also goes full screen when I expand the div?

Is there a way to make a flash game go full screen along with its container div? I have a button that expands the div to full screen, but the flash game inside remains stuck in the top left corner of the screen. How can I ensure that the flash game expands ...

Incorporating information into an HTML webpage

Question: How can I create a dropdown menu in HTML with a list of languages (e.g. English, French) and display them based on the native language? I want to show the languages in their respective native language on the combo box (e.g. "french" displayed a ...

PHP: The constant ENT_HTML5 is not defined and has been assumed as 'ENT_HTML5'

I encountered the following error message: Use of undefined constant ENT_HTML5 - assumed 'ENT_HTML5' in /blahblahpath/application/models/Post.php on line 12 This error occurred in a basic model that handles some POST input in a forum applicatio ...

Displaying NodeJS error messages directly in the main HTML file

After creating a form using NodeJs and implementing input validations that display errors when users enter incorrect values, I encountered an issue where the errors appear on a new blank page instead of within the main HTML file itself with stylish formatt ...

By utilizing the "order" property, I can arrange divs to start at the bottom and ascend as additional elements are added

Exploring the use of display: flex and order:, I noticed a curious behavior. When I set the order for my first div to 0 (order: 0;), it appears at the top of the page. However, as I add more divs with different orders, they initially show up in unexpected ...