J'ai créé un outil d'étude utilisant Javascript et PHP. Il y a une bascule qui affiche / masque les mots-clés dans un paragraphe, afin que l'utilisateur puisse mentalement "remplir les espaces".
Comment j'ai fait cela jusqu'à présent, c'est que tous les mots-clés sont soulignés, et j'utilise un sélecteur DOM pour sélectionner tous les innerHTML dans les balises u.
<p>
Example sentence, <u>this</u> is a <u>keyword</u>.
</p>
<button onClick='hideKeywords()'>Hide Keywords</button>
<script>
function hideKeywords() {
var x = Array.from(document.getElementsByTagName('u'));
for (var i = 0; i < x.length; i++) {
x[i].style.visibility = "hidden";
}
}
</script>
Cela fonctionne comme prévu - les "mots-clés" sont vides et le flux du document n'est pas affecté, car les mots-clés prennent toujours le même espace qu'ils prendraient normalement.
Un inconvénient est que dans les paragraphes avec des "mots-clés" particulièrement longs, la structure des lignes du paragraphe est perturbée et il semble que le texte flotte au hasard dans l'espace. Ce serait réparable si je pouvais en quelque sorte changer la visibilité de sorte que les mots dans les mots-clés soient masqués et que la décoration du texte (souligné) s'affiche toujours. Cela conserve la structure de la ligne.
J'ai pensé à utiliser Javascript pour remplacer chaque caractère du mot-clé par des traits de soulignement, mais deux autres problèmes surgissent. Une chose est que même si le nombre de caractères reste le même, la largeur peut changer. Par exemple, "apple" n'est pas la même longueur physique que "______". Ce n'est pas idéal car le flux de documents changerait. Un deuxième problème est que je ne vois aucun moyen de récupérer les mots-clés après les avoir convertis en traits de soulignement.
Une solution de contournement consiste à changer la visibilité en "caché", je pourrais changer l'arrière-plan- couleur de la même couleur que le texte. Cela bloque le texte, mais la structure des lignes et le flux de documents sont tous deux préservés. Cependant, j'espère trouver un moyen de mettre en œuvre mon idée originale, donc toute suggestion est appréciée!
Mise à jour: je préférerais ne pas ajouter de div supplémentaires aux mots-clés. L'utilisateur peut ajouter de nouvelles entrées à l'aide d'un éditeur de texte enrichi, donc déclarer un mot-clé est aussi simple que de le souligner dans l'éditeur de texte.
3 Réponses :
Je mettrais probablement en œuvre ceci en utilisant votre deuxième méthode. Définissez la couleur du texte sur la même couleur que l'arrière-plan, puis ajoutez une bordure inférieure à l'élément. Préserve l'espacement et vous permet de vérifier rapidement si vous avez raison en mettant simplement en évidence la ligne. De plus, si vous attribuez une classe à l'élément wrapper de mot-clé, vous pouvez facilement changer la couleur du texte masqué et conserver les soulignements pour voir ce qui a changé. -lang = "js" data-hide = "false" data-console = "true" data-babel = "false">
<div> This <span>is hidden</span> with an underline </div>
div {
color: black;
}
span {
color: white;
text-decoration: none;
border-bottom: 2px solid green;
}
Vous pouvez le faire avec css en ajoutant un pseudo-élément et au lieu d'utiliser la visibilité masquée, en utilisant color: transparent, comme ceci:
<script>
function hideKeywords() {
var x = Array.from(document.getElementsByTagName('u'));
for (var i = 0; i < x.length; i++) {
x[i].style.color = "transparent";
}
}
</script>
Et dans le script
u{
position:relative;
}
u::after{
content: ' ';
display:block;
position:absolute;
bottom:0;
left:0;
width: 100%;
height:1px;
background-color:#000;
}
Cela a fonctionné à merveille, merci beaucoup! J'ai juste besoin de supprimer le soulignement d'origine dans la balise u pour éviter d'avoir une ligne très épaisse.
J'ai trouvé un petit problème avec votre solution. Il semble que lorsque le texte souligné (mots-clés) se brise dans une nouvelle ligne, le soulignement ajouté disparaîtrait. C'est un peu problématique car mon site Web est optimisé pour les mobiles et les sauts de texte changent tout le temps. Connaissez-vous des solutions? Merci beaucoup!
@Panpaper pouvez-vous me donner un exemple plus détaillé? Im essayant avec les mots-clés dans tous les endroits et ne peux pas le trouver.
Alors prenez cette phrase suivante comme exemple. Cette phrase a une section soulignée qui est vraiment longue et se transforme en une nouvelle ligne . Dans ce scénario, le soulignement supplémentaire que nous avons ajouté avec "u :: after" n'apparaît pas.
@Panpaper Vous pouvez mettre "chaque mot-clé long" dans un et les pseudo-éléments commencent simplement sur chacun d'eux, comme ceci: ce est < u> vraiment longs et pauses en a nouvelle ligne
Vous devrez trouver un moyen de positionner le div sous le texte masqué, mais vous pouvez utiliser le code suivant pour créer un div avec la largeur du texte. Je pourrais revenir plus tard après avoir répondu et trouver un moyen de positionner le div.
Dans votre HTML, disons que vous avez une phrase, foo bar foo bar , que vous voulez masquer. Vous lui attribuerez un identifiant avec le code:
Voici le CSS:
var fontSize = 20; //this defines a font size
var foo = document.getElementById("foo");
foo.style.fontSize = fontSize; //this sets the style as the font size
var width = (foo.clientWidth) + "px"
var div = document.createElement("div");
div.style.width = width;
div.style.height = 2px;
div.style.background = "red"; //makes the underline visible
document.getElementById("main").appendChild(div);
Ensuite, dans votre Javascript, vous pouvez utiliser le code suivant:
#foo {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}
À partir de là, vous pouvez probablement simplement repositionner le div comme vous le souhaitez il apparaît sous le texte. De cette façon, le div est la longueur exacte du texte.
Une autre solution serait d'utiliser une police à espacement fixe, puis de calculer manuellement la largeur.
Merci pour la réponse détaillée! Malheureusement, cela ajoute une certaine dépendance à la taille de la police, ce qui peut ne pas être bon pour les vues mobiles. Le site Web est conçu pour être réactif et la taille de la police peut changer de manière dynamique lorsqu'elle est affichée sur mobile.
utiliser une bordure inférieure en ligne continue
La largeur de @JaromandaX
bottom-borderne peut pas être modifiée.@JaromandaX Merci mais cela ne fonctionne pas. Lorsque je change la visibilité en "masqué", la bordure inférieure est également masquée.
Quelle est votre taille de police?
@Jodast La taille de la police est 20px. Je suis curieux de savoir comment cela pourrait changer les choses?
@Panpaper juste quelque chose pour le code que j'écris dans ma réponse