Text overlaps on other other text or even images

[ghost]

Most issues can be seen in titles. Affects all range of Wikis.

http://library.kiwix.org/wikipedia_gsw_all_nopic_2019-06/A/Wikipedia:Houptsyte GSW http://library.kiwix.org/wikibooks_gl_all_nopic_2019-07/A/Portada GL http://library.kiwix.org/wikipedia_scn_all_nopic_2019-04/A/P%C3%A0ggina_principali SCN http://library.kiwix.org/wikinews_bs_all_nopic_2019-07/A/Po%C4%8Detna_strana BS http://library.kiwix.org/wikipedia_tt_all_nopic_2019-04/A/%D0%91%D0%B0%D1%88_%D0%B1%D0%B8%D1%82 TT http://library.kiwix.org/wikinews_bs_all_novid_2019-07/A/Po%C4%8Detna_strana BS http://library.kiwix.org/wikipedia_eu_all_novid_2019-06/A/Azala EU http://library.kiwix.org/wikisource_pt_all_novid_2019-07/A/Wikisource:P%C3%A1gina_principal PT http://library.kiwix.org/wikiversity_fr_all_nopic_2019-07/A/Wikiversit%C3%A9:Accueil FR http://library.kiwix.org/granbluefantasy_en_all_all_novid_2018-10/A/Main_Page.html EN http://library.kiwix.org/wikipedia_tt_all_novid_2019-04/A/%D0%91%D0%B0%D1%88_%D0%B1%D0%B8%D1%82 TT http://library.kiwix.org/wikipedia_vec_all_nopic_2019-04/A/Pajina_prinsipa%C5%82e VEC http://library.kiwix.org/wikipedia_it_all_nopic_2019-10/A/Pagina_principale IT http://library.kiwix.org/wikipedia_lez_all_nopic_2019-05/A/%D0%9A%D1%8C%D0%B8%D0%BB%D0%B8%D0%BD_%D1%87%D1%87%D0%B8%D0%BD LEZ http://library.kiwix.org/wikipedia_xal_all_nopic_2019-04/A/%D0%9D%D2%AF%D1%80_%D1%85%D0%B0%D0%BB%D1%85 XAL http://library.kiwix.org/wikipedia_ce_all_novid_2019-04/A/%D0%9A%D0%BE%D1%8C%D1%80%D1%82%D0%B0_%D0%B0%D0%B3%D3%80%D0%BE CE http://library.kiwix.org/wikipedia_sr_all_nopic_2018-10/A/%D0%93%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B0.html SR http://library.kiwix.org/wikipedia_gan_all_nopic_2019-06/A/%E5%B0%81%E9%9D%A2 GAN http://library.kiwix.org/wikisource_gl_all_novid_2019-07/A/Portada GL http://library.kiwix.org/wikipedia_fy_all_nopic_2019-06/A/Haadside FY http://library.kiwix.org/wikipedia_os_all_nopic_2019-04/A/%D0%A1%C3%A6%D0%B9%D1%80%D0%B0%D0%B3_%D1%84%D0%B0%D1%80%D1%81 OS http://library.kiwix.org/wikipedia_stq_all_nopic_2019-03/A/Haudsiede STQ http://library.kiwix.org/wikipedia_pms_all_novid_2019-04/A/Intrada PMS http://library.kiwix.org/wikisource_pt_all_nopic_2019-07/A/Wikisource:P%C3%A1gina_principal PT http://library.kiwix.org/wikinews_ca_all_nopic_2019-07/A/Portada CA http://library.kiwix.org/wikipedia_pms_all_nopic_2019-04/A/Intrada PMS http://library.kiwix.org/wikipedia_ce_all_nopic_2019-04/A/%D0%9A%D0%BE%D1%8C%D1%80%D1%82%D0%B0_%D0%B0%D0%B3%D3%80%D0%BE CE http://library.kiwix.org/wikisource_fi_all_novid_2019-07/A/Etusivu FI http://library.kiwix.org/wikiversity_it_all_nopic_2019-07/A/Pagina_principale IT http://library.kiwix.org/wikipedia_frr_all_nopic_2019-06/A/Wikipedia:Hoodsid FRR http://library.kiwix.org/wikipedia_lo_all_novid_2019-05/A/%E0%BB%9C%E0%BB%89%E0%BA%B2%E0%BA%AB%E0%BA%BC%E0%BA%B1%E0%BA%81 LO

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[kelson42]

@benoit74 We still have the problem, but not sure this is a bug.

Lets take https://browse.library.kiwix.org/content/wikiversity_it_all_maxi/Pagina_principale, it looks good... but https://browse.library.kiwix.org/content/wikiversity_it_all_nopic/Pagina_principale has indeed the problem

[benoit74]

I think this is a bug. The problem is that since we completely remove the image in nopic, if the layout assumes that the image will be there and consume some "space", then the UI gets broken. Would be interesting to investigate if instead of completely removing the image we can replace it with a block which consumes the same space.

I think it is quite important because here we have a case where the UI is completely broken, but nopic ZIM is always a bit clunky in its layout due to these missing images. Having something consumes space and even visually indicate that an image was supposed to be here but was removed (with a textured background for instance) would be a clear added value IMHO.

Something like this:

<div style="height:160px;width: 213px;background: repeating-linear-gradient( 45deg, #ccc, #ccc 5px, #ddd 5px, #ddd 10px );" class="mw-file-element" id="mwBTc"></div>

[kelson42]

@benoit74 What about keeping the CSS images in nopic? Would this solve the problem?

[benoit74]

Nope, it would not solve the problem of https://browse.library.kiwix.org/content/wikiversity_it_all_nopic/Pagina_principale, these are "real" images coming from the wikitext, not from the CSS.

[kelson42]

@benoit74 What would be a proper approach to solve this issue? Do we have a strategy in mind?

[Markus-Rost]

At the minimum we should respect the alt attributes of images when deleting them, inserting the alt value as text. This alone would solve the issue of https://browse.library.kiwix.org/content/wikiversity_it_all_nopic/Pagina_principale and they are only using alt=" ". Though this is unlikely to solve all formatting issues caused by missing images.

Ideally we would insert some placeholder element taking up the same space as the image, like mentioned above:

<img alt="" src="//upload.wikimedia.org/wikipedia/commons/8/8c/Bluebg_rounded_croped.png" decoding="async" width="250" height="25" class="mw-file-element" data-file-width="250" data-file-height="25">

<span class="mw-file-element" style="display: inline-block; width: 250px; height: 25px;"></span>

[benoit74]

@Markus-Rost you are right regarding alt, this should be respected when it does exist.

Moving alt text to a span (or anything else) is probably going to be clunky because we might have special CSS rules attached to the <img> tag.

My strategy would be:

• if alt is missing or empty, replace src value with "something" (can it be a transparent 1x1 PNG?) and add a CSS class to the image which will create a "patterned" background like on https://github.com/openzim/mwoffliner/issues/1004#issuecomment-3041070103 so that it is clear that something was supposed to be here (we do not end-up with just a blank space and no clue)
• if alt has content, replace src value with a constant missing-B3jfbIJEliFQXYxvBXKhGw.png, where B3jfbIJEliFQXYxvBXKhGw is just a random string to be sure this file will never exist, and keep the rest of the <img> as-is ; this will allow the browser to detect that image is missing and display the alt text just like it would in "reality"

[Markus-Rost]

Unsure about the patterned background. If the image is positioned above or below other elements, this might make some text unreadable.

Unsure about linking the missing image as well. It means the browser will always display a missing file icon before the alt text.