What is the most efficient way to use another character instead of a space on a web page?

Question

Apologies for the vague title.

The question: Is there a way with CSS (avoiding JavaScript) to replace spaces with another character without the extra tags? e.x: <h1>coming soon</h1>

Here's an example of what I'd like to improve:

<style>
    @import 'https://fonts.googleapis.com/css?family=Roboto+Mono';
    @import 'https://justinoboyle.github.io/font/stylesheet.css';
    * {
        font-family: 'Roboto Mono', monospace;
    }
    body {
        background-color: #01000f;
    }
    h1 {
        color: #1e88e5;
        font-size: 5vw;
    }
    h1 > endword:before {
        content: "·";
        color: #444444;
    }
    h1 > endword:after {
        content: "⏎";
        margin-left: 1vw;
        color: #444444;
        font-family: "carriagereturn";
    }
</style>

<h1>coming<endword>soon</endword></h1>

Thank you in advance, and if there is something that needs clarification, then please let me know in the comments.

@RonakP did you read the question? I am; the question is about using another character in place of a space. — Justin J. O'Boyle, Jul 23 '16 at 06:06
Define a font which has a single glyph at the codepoint for the space, then use it. — , Jul 23 '16 at 06:10
@torazaburo this is exactly what I was looking for. Genius! (disappointed I didn't think of it). Thank you! Mind writing this as an answer so I can accept it? — Justin J. O'Boyle, Jul 23 '16 at 06:11
Will not put up an answer since I really don't know enough about how to create such a font and can't provide the necessary details. The basic concept should work fine of course. — , Jul 23 '16 at 07:01

score 1 · Accepted Answer · answered Jul 23 '16 at 06:04

1

There are no completely CSS solutions to this challenge. I have prepared some rather hackish options you could try.

With span tags you could use border-right or border-left. You cannot adjust the height of these because they match the element's dimensions exactly.
Use the before and after Pseudo elements

HTML: <h1>Hello</h1> <h1>world</h1>

CSS: h1::after {content: url(dot.png) }

The after pseudo-element will insert an image (or something else) after the content of the <h1>.

answered Jul 23 '16 at 06:04

Harman

346
2
6

That's fairly similar to what I have, though. I'm fearing that the answer is that I would have to run some JS to turn the traditional markdown into something like you mentioned. – Justin J. O'Boyle Jul 23 '16 at 06:05

score 0 · Answer 2 · answered Jul 23 '16 at 05:48

0

If i understood your question correctly, I would suggest using   in html, which creates whitespaces if thats what you're looking for.

answered Jul 23 '16 at 05:48

John Boga

484
6
14

Not exactly. I'm looking to replace all spaces with a specific character without cluttering up the markup. – Justin J. O'Boyle Jul 23 '16 at 05:54

What is the most efficient way to use another character instead of a space on a web page?

2 Answers2