How Do I make my HTML searchable by a browser Ctrl-F and use absolute text positioning?

Question

Normally if I had an HTML File, I would be able to search for "Three little pigs." by Ctrl F, I could style the whole sentence any way I wanted, i.e.:

<span style="position: absolute; top: 163px; left: 362px; color: rgba(200, 200, 200, 0.01); font-size:15px;">Three little pigs.</span>

But If I wanted the words in different colors, styles, etc. then I can't search the page anymore. Once I hit space after "Three" the search fails.

<span style="position: absolute; top: 163px; left: 362px; color: rgba(200, 200, 200, 0.01); font-size:15px;">Three </span>

<span style="position: absolute; top: 163px; left: 380px; color: rgba(200, 200, 200, 0.01); font-size:18px;">little </span>

<span style="position: absolute; top: 163px; left: 391px; color: rgba(200, 200, 200, 0.01); font-size:17px;">pigs.</span>

How do I make all of the words styled in specific absolute locations, but still a single string?

Answer 1

Normally if I had an HTML File, I would be able to search for "Three little pigs." by Ctrl F, I could style the whole sentence any way I wanted, i.e.:

<span style="position: absolute; top: 163px; left: 362px; color: rgba(200, 200, 200, 0.01); font-size:15px;">Three little pigs.</span>

It is because even you have assigned position: absolute in the style above you have those three letters inline and the absolute positioning works for all of them at the same time not for a single word.

But when coming onwards the below code

<span style="position: absolute; top: 163px; left: 362px; color: rgba(200, 200, 200, 0.01); font-size:15px;">Three </span>
<span style="position: absolute; top: 163px; left: 380px; color: rgba(200, 200, 200, 0.01); font-size:18px;">little </span>
<span style="position: absolute; top: 163px; left: 391px; color: rgba(200, 200, 200, 0.01); font-size:17px;">pigs.</span>

Here you have position:absolute for all three words separately and it gives the result as

And because of this formation by absolute positioning Ctrl + F can't find the words correctly and eventually after searching only the first word(Three) it fails.

Solution

Remove the position:absolute styles for all of them

<span style="color: rgba(200, 200, 200, 0.01); font-size:15px;">Three </span>
<span style="color: rgba(200, 200, 200, 0.01); font-size:18px;">little </span>
<span style="color: rgba(200, 200, 200, 0.01); font-size:17px;">pigs.</span>

Answer 2

With position: absolute on each span element it isn't possible. A possible Solution would be to use a wrapper element like div and give it the absolute position

<div style="position: absolute; top: 163px; left: 362px;">
    <span style="color: rgba(200, 200, 200, 0.01); font-size:15px;">Three </span>
    <span style="color: rgba(200, 200, 200, 0.01); font-size:18px;">little </span>
    <span style="color: rgba(200, 200, 200, 0.01); font-size:17px;">pigs.</span>
</div>