[Résolu] Inline-block dans un <p>

Merci de ta réponse
En fait les "grosses" choses sont appelées par <dfn> et activent une <aside> modale, mais pour qu'elle soit affichée juste au dessous il faut un script qui aille
1) retrouver la bonne <aside>
2) la positionner au bon endroit dans la page
3) la rendre visible
ça marche très bien, je voulais simplement si on pouvait faire plus simple

Les "petites" choses, à mon avis, relèvent de <abbr>, sauf qu'on ne peut pas faire de mise en page sur les title='..." et que les title ne marchent pas sur mobile.

<abbr>Pharaon<span>Désignant originellement la "grande maison" le mot "per-aâ" <img src="https://www.universalis.fr/data/medias/formule/ev171016a.png" alt="per-aâ"> est utilisé pour désigner le souverain à partir de la période Amarnienne <i>(vers 1370 avant J.-C. )</i></span></abbr> 

Il suffit de styler

abbr span {
   position:absolute;
   ....
  display:none;
}
abbr.active span {display:table;}

et d'ajouter un eventLIstener à tous les éléments <abbr> pour activer/déactiver ces balises sur clic.
Sauf à utiliser des <span class="defitition"> et <span class="abbreviation">, ou <a class=..;"> je ne vois pas de balises plus appropriées que <dfn> et <abbr> pour traiter ces situations. De plus c'est plus facile pour la personne qui écrit le texte et pour la personne qui écrit les scripts si ces objets peuvent être désignés par une balise spécifique.

Autant que j'aie compris, <button> n'a pas sa place dans <p>, et par ailleurs, pour moi, <button> est sémantiquement un objet identifiable comme tel et pas un simple bout de texte avec une présentation particulière.

On pourrait sans doute inventer une nouvelle balise, c'est théoriquement possilbe, mais à mon avis ça créerait encore plus de confusion pour le lecteur.
Modifié par PapyJP (29 May 2019 - 18:34)

Bonjour à tous
Je réactive ce fil, car en poursuivant mes essais je tombe sur une situation étrange et j'aimerais votre opinion.

Mon objectif, c'est d'avoir à l'intérieur d'un <p> une zone de texte cliquable, telle qu'un clic sur cette zone fasse apparaître au dessous un popin <aside>.

Si j'écris

<p>le début du texte <dfn>la zone cliquable<aside>la zone popin</aside></dfn> la fin du texte</p>

comme <aside> est une balise de type bloc, le navigateur ferme la balise <p> et génère

<p>le début du texte <dfn>la zone cliquable</dfn></p>
<aside>la zone popin</aside>
la fin du texte
<p></p>

Pour contourner ce comportement (parfaitement normal) j'ai donc développé deux solutions
1) une pour les popin ne contenant que des balises de type inline, dans laquelle le popin se trouve à l'intérieur de la zone cliquable, son positionnement étant géré par CSS
2) une dans laquelle le popin est un <aside> (en dehors du <p> bien entendu).
- un script JS apparie la zone cliquable et le popin
- quand on clique sur la zone cliquable, le script met la valeur du "top" à la valeur du bas de la zone cliquable.
Comme on doit prévoir que l'utilisateur puisse changer la taille ou l'orientation de cette fenêtre, cette valeur doit être recalculée sur onsize et onorientationschange, ce qui est un peu lourd

Pour essayer de faire gérer la position du popin par CSS j'ai fait l'essai suivant :
Lorsque le script apparie la zone cliquable et la popin,, il met le popin à l'intérieur de la zone cliquable, c'est à dire que je fais en JS ce que le navigateur n'accepte pas si je le fais directement en HTML: un <aside> dans un <p>
Et de façon très étonnante, cela semble marcher du moins sous FireFox.

Avant de tester si cette solution "hérétique" fonctionne sous d'autres navigateurs, j'aimerais votre avis.