---
tags: template
---
# Commenter un texte
## Par défaut : commentaires affichés
On peut cependant décider d'en cacher un avec la classe `.hide`
>**`Lorem ipsum dolor sit amet`**<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices.</span>, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices. Aenean efficitur nisl augue, ut commodo urna molestie eget. Ut placerat iaculis purus, et egestas tortor ultricies eu. Sed porttitor enim turpis, non congue lectus hendrerit sed. Ut ac erat enim. Praesent in semper mauris. ****Integer dui diam, iaculis eget risus ut<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices. Aenean efficitur nisl augue, ut commodo urna molestie eget. Ut placerat iaculis purus, et egestas tortor ultricies eu.</span>****, dignissim placerat urna. Nullam ornare posuere nisi, non **_bibendum<span class="right">Commentaire bibendum</span>_** nisi tempor nec. Vestibulum eu sagittis tortor.
>
>Integer _**dictum accumsan<span class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices. Aenean efficitur nisl augue, ut commodo urna molestie eget. Ut placerat iaculis purus, et egestas tortor ultricies eu.</span>**_ iaculis. Etiam _*semper<span class="right mt-15">Commentaire d'un autre passage sur la même ligne : décalage forcé par rapport au commentaire précédent</span>*_ imperdiet lorem sollicitudin commodo. Fusce libero velit, ultricies consequat volutpat eget, finibus eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in urna nibh. Etiam cursus pharetra dui id semper. Cras maximus, elit a pellentesque blandit, sem neque **scelerisque** sapien, quis convallis erat velit lacinia nunc. _`Curabitur eget eros eros`_<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices.</span>. Fusce finibus dui non sem suscipit, ac facilisis augue placerat. Donec consequat urna egestas felis sagittis dignissim. Mauris egestas condimentum nisl sed dapibus. `Maecenas at cursus augue`<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices.</span>. Maecenas sodales ex at quam tincidunt, eget mattis purus posuere.
## Commentaires tous cachés
<div class="hideAll">
>**`Lorem ipsum dolor sit amet`**<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices.</span>, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices. Aenean efficitur nisl augue, ut commodo urna molestie eget. Ut placerat iaculis purus, et egestas tortor ultricies eu. Sed porttitor enim turpis, non congue lectus hendrerit sed. Ut ac erat enim. Praesent in semper mauris. ****Integer dui diam, iaculis eget risus ut<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices. Aenean efficitur nisl augue, ut commodo urna molestie eget. Ut placerat iaculis purus, et egestas tortor ultricies eu.</span>****, dignissim placerat urna. Nullam ornare posuere nisi, non **_bibendum<span class="right">Commentaire bibendum</span>_** nisi tempor nec. Vestibulum eu sagittis tortor.
>
>Integer _**dictum accumsan<span class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices. Aenean efficitur nisl augue, ut commodo urna molestie eget. Ut placerat iaculis purus, et egestas tortor ultricies eu.</span>**_ iaculis. Etiam _*semper<span class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices.</span>*_ imperdiet lorem sollicitudin commodo. Fusce libero velit, ultricies consequat volutpat eget, finibus eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in urna nibh. Etiam cursus pharetra dui id semper. Cras maximus, elit a pellentesque blandit, sem neque **scelerisque** sapien, quis convallis erat velit lacinia nunc. _`Curabitur eget eros eros`_<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices.</span>. Fusce finibus dui non sem suscipit, ac facilisis augue placerat. Donec consequat urna egestas felis sagittis dignissim. Mauris egestas condimentum nisl sed dapibus. `Maecenas at cursus augue`<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices est nunc, sed posuere nibh elementum ultrices.</span>. Maecenas sodales ex at quam tincidunt, eget mattis purus posuere.
</div>
<style>
h1 {text-align:center}
h2 {margin-top:2em!important; margin-bottom:1em!important}
h2,h3, #doc>p {margin-left:100px; margin-right:100px}
blockquote {border:none!important; max-width:570px; margin:auto; margin-top:3em!important}
blockquote * {color:black; font-family: "ETBembo","et-book","Gentium Book Basic", "Minion Pro","Times New Roman", serif; text-align:justify; text-indent:2.5em;letter-spacing: 0px; line-height:1.35em;}
blockquote strong {font-weight:600;}
blockquote strong strong {text-decoration:underline red 2px; font-weight:normal;}
blockquote strong em {text-decoration:underline green 2px; font-weight:normal; font-style:normal}
blockquote em strong {text-decoration:underline dodgerblue 2px; font-weight:normal; font-style:normal}
blockquote em em {text-decoration:underline plum 2px; font-style:normal}
blockquote code {font-size:1em!important; background-color:linen!important;}
blockquote em code {font-size:1em!important; background-color:LemonChiffon!important; font-style:normal}
blockquote strong code {font-size:1em!important; background-color:Moccasin!important; font-weight:normal}
blockquote span {display:block; position:absolute; width:250px; font-size:0.8em; text-indent:0.5em}
blockquote span.left,blockquote span {margin-left:-300px; margin-top:-1.5em}
blockquote span.right {margin-left:585px}
blockquote span:before {content:"▪"; margin-right:0.45em}
blockquote strong+span:before {color:SandyBrown}
blockquote em+span:before {color:PeachPuff}
blockquote code+span:before {color:BurlyWood}
blockquote strong strong span:before {color:red}
blockquote strong em span:before {color:green}
blockquote em strong span:before {color:dodgerblue}
blockquote em em span:before {color:RebeccaPurple}
blockquote span.hide, div.hideAll blockquote span {visibility:hidden}
blockquote code:hover+span.hide,blockquote em:hover+span.hide,blockquote strong:hover+span.hide,blockquote strong strong:hover span.hide,blockquote strong em:hover span.hide,blockquote em strong:hover span.hide,blockquote em em:hover span.hide {visibility:visible!important}
div.hideAll blockquote code:hover+span,div.hideAll blockquote em:hover+span,div.hideAll blockquote strong:hover+span,div.hideAll blockquote strong strong:hover span,div.hideAll blockquote strong em:hover span,div.hideAll blockquote em strong:hover span,div.hideAll blockquote em em:hover span {visibility:visible!important}
.mt-1 {margin-top:0.5em!important}
.mt-2 {margin-top:1em!important}
.mt-3 {margin-top:1.5em!important}
.mt-4 {margin-top:2em!important}
.mt-5 {margin-top:2.5em!important}
.mt-6 {margin-top:3em!important}
.mt-7 {margin-top:3.5em!important}
.mt-8 {margin-top:4em!important}
.mt-9 {margin-top:4.5em!important}
.mt-10 {margin-top:5em!important}
.mt-11 {margin-top:5.5em!important}
.mt-12 {margin-top:6em!important}
.mt-13 {margin-top:6.5em!important}
.mt-14 {margin-top:7em!important}
.mt-15 {margin-top:7.5em!important}
.mt-16 {margin-top:8em!important}
.ui-infobar {display:none}
@media only screen and (max-width : 1250px) {
blockquote span.hide, div.hideAll blockquote span {visibility:visible}
blockquote span.left,blockquote span, blockquote span.left *,blockquote span * {color:transparent}
blockquote span.right, blockquote span.right * {color:transparent}
blockquote span.left, blockquote span{margin-left:-30px;}
blockquote span.right {margin-left:-30px;}
blockquote span:before{content:"*"!important; color:red!important;opacity:1!important;}
blockquote span:hover,blockquote span.left:hover,blockquote span.right:hover,blockquote span:hover *,blockquote span.left:hover *,blockquote span.right:hover *{color:black; background-color:white;}
blockquote span:hover,blockquote span.left:hover,blockquote span.right:hover {border:1px solid blue;}
}
</style>