Add a space following each individual character using CSS styling

Imagine we start with this HTML:

<h2>TITLE</h2>

Can CSS alone transform it into something like this:

<h2>T I T L E</h2>

The goal is to justify the letters within the title over a specified width without relying on server-side solutions before exploring CSS possibilities.

I've successfully justified individual letters using these CSS rules:

h2 {
  text-align: justify;
  width: 200px; // for example
}

h2:after {
  content: "";
  display: inline-block;
  width: 100%;
}

I've considered text-replace, but major browsers do not support it. So far, no other promising options have been found.

If CSS3 has solid support, it's acceptable, but JavaScript is not desired.

UPDATE

letter-spacing isn't suitable because the adjustment must be dynamic and I wish to avoid constantly checking browser kerning implementations. Thank you to those who suggested it, as it slipped my mind when writing the question :)

Check out this jsfiddle for experimentation

Answer №2

An alternate method of achieving this effect is by utilizing the letter spacing css property.

For instance:

p {
      letter-spacing:5px;
   }

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

Why does replacing <input> with <TextField> in Material-UI & React cause the form submission to fail?

Recently, I encountered an issue with my CRUD Todo app's form for adding tasks. Initially built with a basic HTML input and button setup, I decided to enhance the design using Material-UI components. After introducing <TextField> in place of th ...

Implement a full-width dropdown menu with Bootstrap 4

Hey guys, I'm having a real head-scratcher here. I've created a dropdown menu using Bootstrap 4, but I'm having trouble making it responsive for mobile screens. I've tried using media queries to make the dropdown menu occupy 100% width ...

Transforming a triangular shape into a square using Plane Geometry in THREE.js

I have an animation created with triangles in the link below. Is there a way to convert these triangular areas into squares? The animation currently has a line running through the middle when using "PlaneGeometry". Removing this line would turn the triangl ...

The styling of Material UI's contained button is being overridden by MuiButtonBase-root

Currently, I am working with material-ui in a react project. In one of my components, I have incorporated a simple contained button: <Button variant='contained' color='primary'> Edit</Button> However, despite setting it as ...

Arrange all absolute divs equidistant from each other

I'm struggling with positioning multiple absolute divs inside a relative container using the CSS 'left' property. I want these inner divs to be evenly spaced regardless of how many there are, without setting fixed values for each. Currently ...

Is it possible to customize the appearance of specific characters within an input field?

One of our clients has inquired about incorporating the type="number" attribute for a credit card field to ensure the appropriate keyboard is displayed on mobile devices. However, they also want to add padding after every 4th character to mimic the appea ...

If additional content has been included in the `div`, be sure to scroll all the way down to view it

I have a div that needs to automatically scroll to the bottom when new content is added. This is a common feature in chat applications where the user wants to see the latest messages without having to manually scroll down each time. How can I achieve this ...

Instead of displaying the location attribute in an alert, populate it into a text area

I have a function that can retrieve my current location using longitude and latitude coordinates. However, I am looking to automatically fill a text area (Populate Here) with the results instead of displaying an alert. <!DOCTYPE html> <html> ...

Can a CSS <div> element have margins applied to it?

Can a margin be defined for a text area? My WYSIWYG editor wraps my text within <div> tags instead of using line breaks <br /> So I was thinking of adding a margin to the <div> tag? Is this possible in CSS? If so, how can it be done? ...

Having trouble getting PHP to display an image on the webpage

When attempting to output a simple image using PHP, I noticed that it only displayed a white square. This led me to believe that the IMG file could not be found. However, when I used a basic HTML IMG tag, the file was located without any issues. Even try ...

Overlaying images with cropped elements

When uploading an image on a webpage, I want to display a preview of the image. I am looking to create an overlay that showcases the image in a rectangle at the center, surrounded by a semi-transparent background outside the rectangle. Something resemblin ...

Can you explain the functionality of the Django Form Action?

Often, Django Forms examples lack a specified action. For example: <form method="post"> {% csrf_token %} {{ form.as_p }} <div class="form-actions"> <button type="submit">Send</button> </div> </form> The page source ...

Top pick on bootstrap 5 navigation pane

Hey everyone, I'm currently working on setting up a featured post within a Bootstrap nav-pill that includes categories. The goal is to display 5 contents from the selected category in two separate divs and designate the first article as the featured o ...

Obtaining values from alternating nodes in a SQL query

Can anyone help with extracting values of odd and even nodes in SQL from this XML example? declare @htmlXML xml = N'<div class="screen_specs_container "><div class="left_specs_container">Compatibility:</div><div class="right_spe ...

Transforming an HTML and Javascript Project into a Standalone Application

Currently, I am engaged in a side project to enhance my skills in HTML/CSS/JavaScript. I have been using Aptana as my primary tool for coding, and it is configured to run smoothly in a browser environment. Specifically, the project I am working on is a te ...

HTML: keeping script for future use in a variable

Is there a way to store a value in one place within an HTML document without the need for a database or PHP? Avoiding the repetition of typing the same value multiple times is the goal. Consider the following scenario: HTML <!-- Desktop --> <di ...

Is full support for CSS 3D transforms (preserve-3d) provided by IE11?

Creating a web app utilizing css 3d transforms, my goal is to have IE11 support if feasible. I am aware that IE10 does not endorse the preserve-3d value for the transform-style css attribute, however, there seems to be conflicting information regarding I ...

Storing HTML in a Database

I've encountered an issue while attempting to parse through an HTML file that consists solely of tags. I wrote a function to extract the content between these tags, and while I'm able to display it on the page without any problems, inserting th ...

Sorting through a collection of subarrays

Within my application, the structure is set up as follows: [ ["section title", [{ item }, { item } ... ]], ["section title", [{ item }, { item } ... ]], ... and so forth When displayed in the view, the sections are placed in panels, with their internal ...

Creating a standalone Wordpress child theme with its own CSS

After creating a child theme based on the responsive i-transform theme from http://templatesnext.org/itrans/, I found myself continuously undoing the i-transform CSS, which is taking up a lot of my time. However, if I remove the entire parent stylesheet, t ...