icons injected by CSS are not shown in FTR result

Full-Text RSS
1

I have another problem with heise.de. In product tests, lists with positive and negative keywords are often inserted at the end of the article, ‘pro’ and ‘contra’. For this purpose, lists with <ul><li> are used. However, the symbol in front of each list element is inserted afterwards via CSS, depending on <div class=xxx>.

I have now spent several hours trying to inject a style into the the source via replace_string, but had no success.

Is there any way to inject the green and red symbols so that it matches the original? Or is it at least possible to put simple standard characters + and - in front of the list elements?

Excerpt from the original page (curl -b cookie=xxx -o filname url):

<div class="pro rte__list--pro rte__list"><ul><li>first and only psitive argument</li></ul></div>
<div class="contra rte__list--contra rte__list"><ul><li>first negative argument</li><li>second negative argument</li></ul></div>

Here the relevant part from CSS:

.rte__list--pro ul li::before {
  content: "";
  position: absolute;
  top: .35rem;
  left: 0;
  display: inline-block;
  width: .7rem;
  height: .7rem;
  background-image: url(/assets/heise/images/pro-contra-plus.b532.ltc.svg);
  background-repeat: no-repeat;
  background-position: 50%;
}
.rte__list--contra ul li::before {
  content: "";
  position: absolute;
  top: .35rem;
  left: 0;
  display: inline-block;
  width: .7rem;
  height: .7rem;
  background-image: url(/assets/heise/images/pro-contra-minus.81a5.ltc.svg);
  background-repeat: no-repeat;
  background-position: 50%;
}

Here are two screenshots, on the left from the browser of the original page and on the right the result from FTR:

grafik <= original ||| FTR => grafik

I didn’t find a free article with these lists, only paid content. So I could not sent an article-link, yet.

2

I can’t think of a good way to do this in Full-Text RSS at the moment. Using replace_string I imagine is difficult because there can be multiple <li> elements for each type (plus or minus).

Relying on CSS support in feed readers is also not a great idea I think. So even if you manage to insert CSS for this, there are many feed readers that will ignore it.

I think the best thing to do here would be to implement something like CSS’s ::before in Full-Text RSS. But using XPath instead of CSS selectors. Then you’d be able to do something like this:

insert_start: //div[contains(@class, 'list--pro'')]//li
insert_content: + 
insert_start: //div[contains(@class, 'list--contra'')]//li
insert_content: -

Just an idea, but we’ll see if we can implement something like this in a future release.

1 Like