cssdialogjustify

How to exclude leading hyphens from justification in dialogue lines using CSS + HTML?

I am writing fiction story in my blog, and the text is horizontally justified (as in printed books). However, this makes a negative impact on dialogue lines, because the distance between the leading hyphen and the following word gets justified as well. Eventually, for different lines of dialogue the first word is not aligned. Is it possible to overcome the issue using some CSS + HTML trick? Is it possible to achieve similar in Google Docs or Libre Office Writer? Thanks.

Sample screenshot (please ignore the actual wording - this is just to illustrate the case). As you can see, the first word ('Good' in both cases) is not left-aligned (I don't care about the rest of words).

Sample text

In fact, I'd like to treat leading hyphen, followed by a single space and one word, as a single word. I tried to do something like:

dstart::before { content: "\2014\00a0"; }</style><br/>
<span class="dstart">Good</span>

But my browser (Firefox) still recognized space character and performed similar alignment. I assume, there is no need to check in the other major browsers if one of those does not accept my approach.

The following solves the issue:

<span style="padding-right: 0.5em;">-</span>Good...

However, when doing copy/paste there will be no space between hyphen and 'Good' in plan text, and therefore, still not acceptable for me.

Solution

  • Finally, I found solution myself. Sorry Rounin and Oriol for taking so much of your time and thanks a lot for your genuine effort to help me. As I mentioned, I needed leading hyphen, space and the first word to be treated as a single word. Therefore, no need for any styling or special lists, but simply to use –&ensp; or similar:

    <!DOCTYPE HTML>
<html>

<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">

	<style>
	    p { margin-top: 0; margin-bottom: 0; text-align: justify; }
	</style>
</head>

<body>
	<p>–&ensp;Good morning, Alex-Ben-Charlie-David-Eugene-Frederick-George-Harry-Ian-Jake-Keith-Lachlan.</p>
	<p>–&ensp;Good morning, Alex-Ben-Charlie-David-Eugene-Frederick, George-Harry-Ian-Jake-Keith-Lachlan-Mark.</p>
	<p>–&ensp;Good morning, Mr. Pickwick.</p>
</body>
</html>

    In this case text on page gets displayed as expected, and copy/paste also works as expected. I am using paragraph wrapper <p>, because in WordPress it gets injected implicitly when I write something like this:

    –&ensp;Good morning, Alex-Ben-Charlie-David-Eugene-Frederick-George-Harry-

    –&ensp;Good morning, Alex-Ben-Charlie-David-Eugene-Frederick, George-Harry-Ian-Jake-Keith-Lachlan-Mark.

    –&ensp;Good morning, Mr. Pickwick.

    And when I copy/paste plain text from my page displayed, each block is separated with blank line. Yes, I want it to be that way, because for plain text it would be easier for reading.