Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

HTML

Mise en forme des caractères

RDFFav

Caractères barrés - Barrer un texte (maj HTML5)

Permet d’afficher une ligne au-dessus des caractères. Utilisé pour identifier un mot ou une phrase comme étant désuet. Souvent utilisé pour indiquer qu’un prix n’est plus valide.html, strike, barré, barrés, balise, tag, caractère, format, forme, texte, style, strike

  • · Niveau : DÉBUTANT
  • · Compatibilité : Tous les navigateurs

Permet d’afficher une ligne au-dessus des caractères. Utilisé pour identifier un mot ou une phrase comme étant désuet. Souvent utilisé pour indiquer qu’un prix n’est plus valide.

Mises à jour HTML5

Enfin une bonne décision de la W3C. Mais c’est tout de même ironique, le strike est brillamment remplacé par l’élément s. C’est-à-dire 5 caractères de moins et des fichier moins lourds. Efficacité énergétique oblige. Bon c’est un élément qui n’est pas fréquent mais la W3C nous demande aussi de passer du b au strong. Le pire c’est la définition « rendered as bold text », on ne dit pas « rendered as strong text »! Or donc on passe du « strike > b » au « s > strong » (!).

Exemple (désuet) : <STRIKE>Votre texte..</STRIKE>

Résultat : Votre texte…


Exemple : <s>Votre texte..</s>

Résultat : Votre texte…

Autres solutions

Pour perdre un peu plus de temps, pour faire un bon détour alors que le CSS est LA solution, on a encore un tas d’éléments! La balise del permet ...la même chose. De pair avec son antonyme ins qui permet d’insérer une nouvelle information. Cette fois avec deux attributs :

Attributs HTML
cite
URL valide. Indique l’adresse d’un document qui explique le changement. Par exemple, les minutes de la réunion.
datetim
Date valide, avec ou sans l’heure. Indique l’heure et la date de la modification.

Exemple de suppression : <del cite="raisons.htm" datetime="2014-10-10T00:00Z">Nouvelle date..</del>

Résultat : Réunion du 10 octobre


Exemple d’insertion : <ins cite="textedescriptif.htm" datetime="2014-10-25T00:00Z">Nouvelle date..</ins>

Résultat : Nouvelle date..


Exemple combiné
<ul>
  <li><ins datetime="2014-10-25T00:00Z">Réunion du 10 octobre</ins></li>
  <li><del cite="raisons.htm" datetime="2014-10-10T00:00Z">Réunion du 10 octobre</del></li>
  <li>Réunion du 10 septembre</li>
</ul>

Résultat combiné :

  • Réunion du 10 octobre
  • Réunion du 10 octobre
  • Réunion du 10 septembre

Version CSS

Exemple avec CSS :
<style>
  .barre {text-decoration:line-through;}
</style>
<span class="barre">
  Barré via CSS
</span>

Résultat CSS : Barré via CSS

Colorer la ligne

On demande souvent d’avoir une couleur pour le texte et une autre pour la ligne, par exemple rouge. La ligne réagie malheureusement comme le « souligné d’un lien » en utilisant bêtement la couleur du texte. Par contre on peut très bien changer la couleur du texte à l’intérieur de la balise s.

Ligne rouge

Exemple avec souligné rouge :
<s style="color:red">
  <span style="color:black">Ligne rouge</span>
</s>


Aussi...

Balise mark pour marquer un mot. Ou encore la balise u pour souligner un texte.


» Suite Mise en forme des caractères

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Par contre si on copie/colle le texte barré dans un formulaire (de forum par exemple) cela donne le texte non barré, comment faire pour copier/coller le texte sous sa forme barrée dans un formulaire ?
    64x64
    Pierre Aribaut

    Date (GMT) : 2018-04-16 18:04:57 (UTC +0000)
    Date local : Mon Apr 16 2018 20:06:17 GMT+0200 (CEST)
    • Bonjour, Le formulaire doit accepter la balise tout simplement. La plupart des formulaires n’acceptent que certaines balises (avec raison) comme le caractère gras, le souligné... Mais par défaut, on peut entrer n'importe quel texte et donc n'importe quel code (HTML, JS, ou CSS) dans un formulaire. C'est sur le serveur qu'on filtre et retire tous les codes envoyés par le formulaire. Celui des Trucsweb.com par exemple autorise tous les codes, mais les convertis en entité HTML pour pouvoir les visualiser. Par exemple <s><b>Texte non barré ni gras puisque saisie à partir d'un formulaire des Trucsweb.com !</b></s> Ciao
      64x64
      oznog
      http://www.trucsweb.com
      Date (GMT) : 2018-04-16 18:17:36 (UTC +0000)
      Date local : Mon Apr 16 2018 14:18:55 GMT-0400


    9,5/10 sur 2 revues.
           Visites : 48710 - Pages vues : 88165
    X

    Trucsweb.com Connexion

    X

    Trucsweb.com Mot de passe perdu

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte