Initial letter and word in jekyll posts and pages

Question

I would like to style the initial letter and the initial word of my posts and pages in my jekyll blog. Something like this:

I can achieve this result with the following style and span tags:

:not(.post-excerpt) > .initial-word {
  color: #166079;
  font-variant: small-caps;
  font-weight: bold;
}

:not(.post-excerpt) > .initial-word .initial-letter {
  float: left;
  font-size: 3.15em;
  line-height: 0.5;
  margin: 0.225em 0.159em 0 0;
  color: #166079;
  font-weight: normal;
  text-transform: uppercase;
}

<p>
  <span class="initial-word"><span class="initial-letter">L</span>orem</span> ipsum dolor sit amet
</p>

Given a jekyll post starting with an introduction text:

Lorem ipsum dolor sit amet

# Main title of the post

Lorem ipsum dolor sit amet

The content of the post, accessible in my layout via the liquid code {{ content }} will be something like:

<p>Lorem ipsum dolor sit amet</p>

<h1>Main title of the post</h1>

<p>Lorem ipsum dolor sit amet</p>

I would like to modify the content of the post to add my span tags with the following requirements:

• The initial tags must be added only to the introduction; I don't want them if the content doesn't start with a p tag, and I only want them on the first paragraph.

• The <span class="initial-word"> tag may be used directly in the post to encapsulate more than one word, like this:

  <span class="initial-word">Lorem ipsum</span> dolor sit amet
  
  # Main title of the post
  
  Lorem ipsum dolor sit amet`
  

In such a case only the <span class="initial-letter"> should be added.

I ended up with this complicated code for posts:

{% assign content_start=content | slice: 0, 3 %}
{% assign tokens=content | split: '<span class="initial-word">' %}
{% assign count=tokens | size %}
{% if content_start == "<p>" or count > 1 %}
  {% if count > 1 %}
    {% assign tokens=tokens[1] | split: "</span>" %}
    {% assign initial_word=tokens[0] %}
  {% else %}
    {% assign initial_word=content | remove_first: "<p>" | truncatewords: 1, "" %}
  {% endif %}
  {% assign initial_letter=initial_word | slice: 0 %}
  {% assign span_letter=initial_letter | prepend: '<span class="initial-letter">' | append: '</span>' %}
  {% assign span_word=initial_word | replace_first: initial_letter, "" | prepend: span_letter %}
  {% unless count > 1 %}
    {% assign span_word=span_word | prepend: '<span class="initial-word">' | append: '</span>' %}
  {% endunless %}
  {% assign content=content | replace_first: initial_word, span_word %}
{% endif %}

And a similar, but slightly different version for pages. Does somebody have any hint to do that in a simpler way? Some magic filter I am missing?

Answer 1

Starting from the comment of @IanDevlin, I first changed the explicit marking of first word following the model of the excerpt separator:

Lorem ipsum<!--first-word--> dolor sit amet

# Main title of the post

Lorem ipsum dolor sit amet

Using the ::first-letter selector, I changed the liquid code to detect the first p tag matching my requirements (basically, I consider the paragraph only if it starts the content):

{% assign content_start=content | slice: 0, 3 %}
{% if content_start == '<p>' %}
  {% if content contains '<!--first-word-->' %}
    {% assign content=content | replace_first: '<!--first-word-->', '</span>' %}
  {% else %}
    {% assign first_word=content | remove_first: '<p>' | truncatewords: 1, '' %}
    {% assign span_word=first_word | append: '</span>' %}
    {% assign content=content | replace_first: first_word, span_word %}
  {% endif %}
  {% assign content=content | replace_first: '<p>', '<p class="first-p"><span class="first-word">' %}
{% endif %}

This generates the following html code, with updated css:

:not(.post-excerpt) > .first-word {
  color: #166079;
  font-variant: small-caps;
  font-weight: bold;
}

:not(.post-excerpt) > .first-p::first-letter {
  float: left;
  font-size: 3.15em;
  line-height: 0.5;
  margin: 0.159em 0.159em 0 0;
  color: #166079;
  font-weight: normal;
  text-transform: uppercase;
}

<p class="first-p">
  <span class="first-word">Lorem ipsum</span> dolor sit amet
</p>

Answer 2

Not a full answer and I might have misunderstood something, but for the first letter, I would suggest using the :first-letter selector instead of wrapping it in a span.

And for selecting the first paragraph in , p:first-of-type could help?