CODEWITHSUNDEEP
htmlcsscss-position
mas
mas

Reputation: 1245

How to position an inline element outside of an element without affecting a sibling inline element

Please see clarification at the bottom

I am trying to add line numbers to specially laid out text (it's justified using the rather hacky methods I found here).

Here is an example of the html:

<paragraph class="fl">
    ...
    <line class="l" id="4">
    being bound down the river, the only thing for it was to come to and wait
    </line>

    <span class="linenum">5</span>
    <line class="ll" id="5">
    for the turn of the tide.
    </line>
</paragraph>

<paragraph class="fl">
    <line class="fl" id="6">
    The sea-reach of the Thames stretched before us like the beginning of an
    </line>
    ...
    <line class="l" id="9">
    barges drifting up with the tide seemed to stand still in red clusters of
    </line>

    <span class="linenum">10</span>
    <line class="l" id="10">
    canvas sharply peaked, with gleams of varnished sprits. A haze rested on
    </line>
    ...
</paragraph>

I initially got my line numbering styles by cribbing from Open Source Shakespeare:

.linenum {
    font-family: Playfair Display, serif;
    font-size: 0.7em;
    position: absolute;
    padding-left: 50px;
    left: 500px;
    font-weight: bold;
}

But absolute positioning wasn't working for me: my content is centered on the page, the absolute positioning collides with the content as the page is resized.

I therefore attempted relative positioning, abolishing the padding and switching to right instead of left positioning to play off the text:

.linenum {
    font-family: Playfair Display, serif;
    font-size: 0.7em;
    position: relative;
    right: 50px;
    font-weight: bold;
}

But this produces

Wide view Close up]

As you can see in the picture the margin from the linenum spans is producing a push-in effect on the lines affected. I have tried z-index: -1; and z-index: 1; but it seemed to produce no results.

Does anyone have suggestions?

Clarification

My "hack" is specifically how I got single lines to justify.

There are several sets of styles of the form

line.fl {
    line-height: 1.5em;
    margin: 0px;
    text-align: justify;
    text-indent: 1em;
}
line.fl:after {
    content: "";
    display: inline-block;
    width: 100%;
}

The reason for this is thus: my data model consists of individual lines of books. The line numbers are important to the operation of the application, so they need to be laid out as they are represented in the data. I have found no way to justify text and maintain breaks (if I do not use this hack and justify my text, the lines will cluster: parts of the next line will be brought up to the current line to fill out the text).

Please note also that the line numbers themselves correspond to the actual text. I cannot use a counter because then the line numbers would reset in a chapter. I am using jinja2 and generating them within a for-each loop thusly:

{% if line.l_num % 5 == 0 %}
    <span class="linenum">{{ line.l_num }}</span>
{% endif %}
<line class="{{ line.l_class.l_class }}" id="{{ line.l_num }}">
{{ line.line|safe }}
</line>

I have updated the title to be clearer. I am sorry for the confusion. This question is specifically about positioning.

Upvotes: 2

Views: 64

Answers (1)

Kosh
Kosh

Reputation: 18378

Woa woa woa, you don't have to use "hacky" solutions for this.
You might do the trick with a nice CSS counter.
Run the snippet below:

Note, I used standard HTML tags, but it will work with your custom tags too.

body {
  counter-reset: i;
  background: #fdf6e3;
}

p {
  padding-left: 5em;
  font: 400 1em/1.3 'Playfair Display', serif;
  color: rgba(0, 0, 0, .75);
}

span {
  display: block;
}

span:nth-of-type(5n)::before {
  counter-increment: i 5;
  content: counter(i);
  float: left;
  width: 4em;
  margin: 0 0 0 -6em;
  text-align: right;
  font-size: .7em;
  font-weight:600;
  line-height: 2;
}
<p>
  <span>one -- being bound down the river,</span>
  <span>two -- being bound down the river,</span>
  <span>three -- being bound down the river,</span>
  <span>four -- the only thing for it was to come to and wait</span>
  <span>five -- for the turn of the tide.</span>
</p>

<p>
  <span>six -- being bound down the river,</span>
  <span>seven -- being bound down the river,</span>
  <span>eight -- being bound down the river,</span>
  <span>nine -- the only thing for it was to come to and wait</span>
  <span>ten -- for the turn of the tide.</span>
  <span>eleven -- for the turn of the tide.</span>
  <span>twelve -- for the turn of the tide.</span>
</p>

Hope it helps!

Upvotes: 2

Related Questions