Possible ? : div de texte dans une autre div, aligné en bas à droite

Hello amis des standards. Voilà, j'ai beau retourner Google dans tous les sens, pas moyen de trouver une solution, donc je commence à me demander si c'est possible. Je veux faire ça :



C'est à dire, avoir une div de texte alignée en bas à droite dans une autre div de texte. Typiquement donc, la petite div est en float:right, mais je ne connais pas d'avance la hauteur du texte dans la grosse div.

Voila ou j'en suis pour le moment, mais la petite div reste désespérement en dessous du texte:

<div id="para">
Texte principal 
<div id="annotation">
petit texte imbriqué
</div>
</div>

#para
{
    width:500px;
    float:left;
    text-align: justify;
}

#annotation
{

    float:right;
    display:inline;
    top: -200px;
    width:200px;
    height:200px; 

 }

Moi j'suis qu'un pauvre dev Flash qui essaye de faire du W3C-compliant

Merci d'avance et bonnes fêtes !

Bonjour,

C'est impossible en CSS. Tu peux vaguement t'en rapprocher en plaçant un contenu flottant à droite au milieu de ton paragraphe de texte, mais ça n'est pas terrible au niveau accessibilité (tu coupes un contenu lisible en y insérant un contenu au rapport pas forcément évident). Et c'est de toute manière très limité.

En effet, en CSS pur, c'est assez contraignant et pas très fiable. Vois-tu une objection à l'utilisation de javascript pour ce rendu ?

Aucune objection, j'utilise déjà une bonne louche de jQuery sur ce projet.

Qu'est ce que tu avais en tête ?

Un début de solution

1) Récupérer le nombre de caractère de l'annotation.
2) Placer un pointeur à la fin du texte principal -(moins) le nombre de caractère de l'annotation.
3) Copier le paragraphe de l'annotation au niveau du pointeur.

Avec jQuery, ça devrait ressembler à ça :

CSS :

<style type="text/css">
    body { background:#ccc; text-align:justify }
	
        #bloc {
            width:400px;
            height:auto;
            padding:20px;
            background:#fff;
        }
	
        .annotation {
            width:200px;
            height:auto;
            float:right;
            padding:10px 0 0 20px;
            color:red;
        }
</style>

Javascript :

<script type="text/javascript">
    <!--
    $(document).ready(function() {
        var texte = $('#bloc p').html();
        var annotation = $('#bloc .annotation').html();
        var longueur = annotation.length;
        var pointeur = new RegExp('^(.*)(.{'+longueur+'})$');
        var paragraphe = texte.split(pointeur);
        $('#bloc').html('<p>'+paragraphe[1]+'<span class="annotation">'+annotation+'</span>'+paragraphe[2]+'</p>');
    });
    //-->
</script>

XHTML :

<div id="bloc">
    <p>Lorem ipsum…</p>
    <span class="annotation">Dolor sit amet…</span>
</div>

Bien à toi.
Erwan
Modifié par r-one (28 Dec 2008 - 03:34)

En gardant à l'esprit que c'est plutôt problématique pour l'accessibilité de ces contenus. En lecture linéaire, au lieu d'avoir "Contenu_A Contenu_B", on a "ConteContenu_Bnu_A".

Oui, en effet, ce n'est qu'un debut de solution…
Rien n'empêche ensuite d'ajouter des séparateurs (<hr />, par exemple) dans le <span> avec

#bloc .annotation hr { position:absolute; left:-9999px }

pour que le rendu en mode texte (je rappelle que l'on est bientôt en 2009…) reste "potable".
Ce qui donnerait "Conte | Contenu_B | nu_A".

Ce n'est pas encore ça, mais c'est mieux que rien.
Modifié par r-one (28 Dec 2008 - 22:48)

r-one a écrit :
je rappel que l'on est bientôt en 2009…

Je te laisse faire passer l'info aux malvoyants et non-voyants: «vous savez les gars, vous pourriez vous contenter de regarder la page web pour lire le contenu, les autres le font bien, vous y mettez vraiment de la mauvaise volonté!»

C'est vrai quoi, merde, on est en 2009. Ils n'ont qu'à s'acheter des yeux.

(Je ne développe pas les autres cas d'usage, type web mobile, exploitation du contenu en dehors de son contexte «normal» type flux RSS, etc. C'est moins vendeur. )

Pour la parenthèse, l'idéologie de nos jours, en plus de n'être pas réaliste, est non productive. Chaque projet est unique, il ne faut pas tomber dans l'extrémisme systématique. Vouloir à tout prix une accessibilité 100% coûte souvent cher aux 90% de personnes (consultant le média) qui n'en n'ont pas besoin. C'est peut-être malheureux à dire, mais c'est comme ça. Et heureusement.

Parenthèse fermée, pour les mal et non-voyants, je ne vois pas le rapport. Ils ont (et je suis bien placé pour le dire) une palette d'outils à leurs disposition capable de digérer l'information en la restituant à l'identique, mais d'une manière différente (je pense principalement à MozBraille mais il en existe beaucoup d'autres).

"Grosso-modo", le voyant verra "Lorem ipsum | Annotation | dolor sit amet" le mal voyant verra "LOREM IPSUM || ANNOTATION || DOLOR SIT AMET" et le non-voyant entendra ou sentira "Lorem ipsum A_LA_LIGNE Annotation A_LA_LIGNE dolor sit amet". Bref, le contenu (et non le contenant) reste le même et "accessible" pour tous, et c'est bien ça le plus important.

Quant aux autres usages, de type flux, mobile, etc., si l'on décide de faire les choses "bien et proprement", ils doivent dans tous les cas de figure et au minimum, faire l'objet d'un "parsing" (qui se chargera, en l'occurrence pour ce cas précis, de remettre tout ça dans le bon ordre), d'une feuille de style, d'un Javascript voire mieux, d'un contenu, dédié.

Je le répète, je n'ai donné qu'une piste, à nerik8000 ensuite de continuer dans cette voie ou d'en trouver une autre plus appropriée. Là, j'ai l'impression que tu essaies de chercher la petite bête. Ça n'en vaut pas la peine…

r-one a écrit :
Là, j'ai l'impression que tu essaies de chercher la petite bête. Ça n'en vaut pas la peine…

Je ne cherche pas la petite bête, je rebondis sur ta remarque qui pouvait être mal interprétée (en gros: on arrive en 2009, donc seul l'affichage visuel dans un navigateur en 1024x768 au minimum est pertinent; je pense que c'est encore moins vrai aujourd'hui qu'il y a un ou deux ans).

Pour le reste, je suis tout à fait d'accord que l'accessibilité à tout prix est une connerie. C'est d'ailleurs pour cela que je réagis, car j'estime que:
1. l'effet visuel recherché ici est relativement mineur et contribuera peu à la qualité du site réalisé;
2. la solution proposée, qui consiste à insérer un contenu B au milieu d'un contenu A, pose un réel problème d'accessibilité, contrairement à ce que tu dis (ta petite démonstration sur l'ordre de lecture est d'ailleurs peu convaincante, mais je ne développe pas plus).

Le problème posé en (2) n'est pas énorme, mais le gain attendu en (1) est selon moi plus faible encore. D'où mon rejet à priori de cette solution.

Pour le reste, je pense que fais une erreur quand tu affirmes que «Vouloir à tout prix une accessibilité 100% coûte souvent cher aux 90% de personnes (consultant le média) qui n'en n'ont pas besoin.» Ou plutôt deux erreurs:

1. Personne ici et aucun professionnel spécialisé en accessibilité numérique n'exige ou ne professe une accessibilité à 100%. Tous ou presque font au contraire des compromis, évaluent l'intérêt de telle ou telle mesure (ce que je fais quelques lignes plus haut), etc. Quand tu parles d'une démarche qui veut une accessibilité à 100%, c'est une caricature; première erreur.

2. Deuxième erreur: les mesures prises pour l'accessibilité profitent généralement, à la marge, à tous les utilisateurs. (Peut-être pas dans le cas présent, mais c'est un cas qui relève du détail.) S'il y a des conséquences néfastes des mesures d'accessibilité, c'est surtout sur les budgets qu'elles s'exercent; mais c'est une autre question.

@nerik8000 : Un "merci" suffisait (quelque soit la "pertinence" de mon code)