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

user_1323010 0
Viewed 370

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?

css html
4 Answers

In a very specific situation (where you don’t need to scroll, and the container is bigger than the children), you can swap out position: absolute for position: sticky. This lets you find in the page as you’re expecting but also gives you the ability to position your words as you want.

user_4537830

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

enter image description here

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>
user_106521940

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>
user_45756710

Using position relative, you can still move your elements around: (and the combined string is searchable). I have changed it to four to be the only string in the page.

.a {
  position: relative;
  top: 100px;
  color: blue;
}

.b {
  position: relative;
  left: 100px;
  color: red;
}

.c {
position: relative;
 top: 50px;
 font-size: 35px;
 color: green;
}
<span class="a">Four </span>

<span class="b">little </span>

<span class="c">pigs.</span>

user_19263690
Related