Can you explain the significance of a percentage in relation to the `word-spacing` property?

MDN states that the word-spacing property has the ability to accept a percentage value, which "specifies extra spacing as a percentage of the affected character’s advance width." However, there are some conflicting observations:

  • The demonstration on the aforementioned page seems to indicate that using word-spacing: 120%; is considered an error.
  • Upon attempting to apply a percentage-based word-spacing in Chrome, it results in an "Invalid property value" error message.
  • According to the CSSWG documentation, percentages are marked as "N/A".

Does this mean MDN is inaccurate?

css

Answer №1

It appears that the MDN might not have the most current information as percentage values were once considered valid in the New Specification (CSS Text Level 3). However, according to the latest Draft, it states:

The following features are at-risk, and may be dropped during the CR period:

...

  • the percentage values of word-spacing

“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.

There is a possibility that the percentage value will no longer be supported.

On another note, the percentage value seems to function correctly on Firefox and MDN confirms this by stating:

https://i.sstatic.net/yQ9fc.png

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

Continuously replicate SVG horizontally without limit

In search of the perfect visual effect, I am eager to develop an infinite animation featuring a car moving horizontally with various landscape layers passing by in SVG format. Struggling to find a way to seamlessly repeat my SVG landscape layers along the ...

javascriptcsssvg

Pressing a button is a way to select a specific form

I'd like to create a clickable button that can direct users to the form section on the same page. <button type="button" class="btn btn-primary btn-sm"> Go to Form Section </button> ... <form id="form1"> <div class="form-g ...

htmlcssformsbutton

Tips for setting up nextjs with typescript to utilize sass and nextjs font styles

I am attempting to configure a Next.js TypeScript app to work with Sass and a font in Next.js. I have been following the steps outlined in this article. Without the font module, styles are working correctly. Below is my next.config.js without the font co ...

csstypescriptsass

What steps should I take to make the code in jsfiddle functional on my Visual Studio Code platform?

const canvasEle = document.getElementById('drawing-container'); const canvasPad = document.getElementById('pad'); const toolbar = document.getElementById('toolbar'); const context = canvasEle.getContext('2d'); const ...

javascripthtmlcsscanvasjsfiddle

What steps can be taken to prevent the progress bar from extending beyond the boundaries of the

Hey there, I'm facing a little issue with my website. I'm working on adding a skill progression bar section and have a sticky navbar in place for easy navigation. However, as I scroll down, the progress bars seem to overflow into the navbar. Any ...

htmlcssanimationcss-animations

Using AJAX to create an interactive dropdown menu with changing options

I have been working on creating a dropdown menu using Ajax. When hovering over the navigation bar, the menu successfully triggers the Ajax function to display the dropdown options. The issue arises when attempting to navigate to another page (show_activi ...

javascripthtmlcssajax

What is the best way to create a fixed sidebar or top bar that remains visible as I move to different pages?

Whenever I navigate to other pages, the sidebar mysteriously disappears. As I work on my project about an admin page, I'm wondering if it's necessary to include every single page? ...

javascriptphphtmlcss

Set a background image URL for a specific division inside a template

I have a drawPlaceDetails function that populates an HTML template with values. The getPhotoURL() function retrieves a URL link to an image, which I am trying to assign to the background-image property. However, the div remains empty without displaying the ...

javascriptjqueryhtmlcss

Creating a dynamic multi-item carousel with Materialize (CSS) cards using data from a loop - here's how!

Using a for loop, the following code generates a list of cards. These cards are intended to be displayed in a carousel with 4 cards visible at once, and a next arrow button allows users to navigate through the next set of 4 cards. Materialize cards have ...

javascriptcssdjango-templatescarousel

Is there an animated Google Contact Form in the works?

Is it possible to replicate the onclick animation featured on the Google login form? The animation involves the placeholder text shrinking and moving to the top left corner as you click the button box, while a border forms around the text. Click here to ...

htmlcssformsanimationtransform

How can I stop the form label from aligning to the right in Bootstrap 4?

I have encountered a formatting issue with my Bootstrap 4 form. The label for "Number of Travellers" is currently aligned to the right, which disrupts the overall look of the form and makes the label appear out of place. Below is the snippet of the code i ...

htmlcssbootstrap-4

Position the label to the left of the form-switch using Bootstrap

I have been struggling to align the label to the left of my switchbox. Despite searching through stackoverflow and other websites, I haven't been successful in achieving the desired alignment. Here is a trimmed down version of the code for reference: ...

htmlcsscheckboxalignment

table with flexible cell width and fixed table width

I've been troubleshooting this issue for days, but I just can't seem to find a solution! The problem lies within a table used on a webpage. If I don't specify table-layout, I can make one cell width dynamic, but I lose the ability to set &a ...

htmlcss

Adjust the height of the Twitter Widget to be proportionate to the height of its parent div dynamically

I have integrated the Twitter widget into my library management system, but I am facing an issue with its fixed height. Is there a way to make the height dynamic through CSS? Any suggestions on how this can be achieved will be greatly appreciated. Below ...

htmlcsstwitterwidgettwitter-widget

Determining the exact position of an absolute element within a Bootstrap container

In my design, I am using a full-width cover image with a bootstrap container class containing an absolutely positioned image on top of the cover image. My goal is to have this image positioned exclusively on the right-hand side of the container. Below is ...

htmlcsstwitter-bootstrapsass

Create dynamic flex transitions

After searching through various CSS resources and websites, I haven't found an answer to my specific query. I have been exploring CSS tricks as well as http://n12v.com/css-transition-to-from-auto/ but still uncertain if what I'm looking to achiev ...

htmlcssflexboxcss-transitions

How can I transfer the height of a parent div to a child div with absolute positioning?

I'm facing an issue where the child div (.timeline) needs to adjust its height as the parent divs (.tea-history) height increases. However, using height:inherit; didn't work as expected because the child div inherited an auto height from the pare ...

htmlcss

Unable to shift to the side while in full flexibility mode

I ran into an issue with my code, shown in the image below. I am trying to position 1 on the left and 2 on the right, but something seems off. Can you spot the problem? <div className="mt-5 mx-5 py-3 shadow bg-white"> &l ...

htmlcssreactjsbootstrap-5

Learn the easy steps to position an image to the right using FreeMarker

I'm attempting to align the final image on the right side of the page in order to achieve a symmetrical look. The code I have been using in FTL is as follows, but it consistently ends up next to the middle section: <table class="h ...

htmlcssfreemarker

What is the best way to highlight and extract only the white-coded texts on VSCode to facilitate the process of translating webpages manually?

Currently, I'm engaged in a project where my task involves duplicating an entire website using HTTrack. However, I only need to copy the main page and web pages that are one link deep. Upon copying the website, my next challenge is to translate all of ...

javascripthtmlcssvisual-studio-codehttrack