<article lang="fr" class="justified">
  <h2>DDHC</h2>
  <div ><fieldset id="image" ><legend>Alignement</legend>
    <input type="radio" checked="checked" id="default-img" value="default-img" name="image" >
    <label for="default-img">Justifié</label>
    <input type="radio" id="text-img" value="text-img" name="image">
    <label for="text-img">Aligné à gauche</label></fieldset></div>
  <div class="image-example">Image Example</div>
<p>Les Représentants du Peuple Français, constitués en Assemblée Nationale,  considérant que l&#39;ignorance, l&#39;oubli ou le mépris des droits de l&#39;Homme  sont les seules causes des malheurs publics et de la corruption des  Gouvernements, ont résolu d&#39;exposer, dans une Déclaration solennelle,  les droits naturels, inaliénables et sacrés de l&#39;Homme, afin que cette  Déclaration, constamment présente à tous les Membres du corps social,  leur rappelle sans cesse leurs droits et leurs devoirs ; afin que les  actes du pouvoir législatif, et ceux du pouvoir exécutif, pouvant être à chaque instant comparés avec le but de toute institution politique, en  soient plus respectés ; afin que les réclamations des citoyens, fondées  désormais sur des principes simples et incontestables, tournent toujours au maintien de la Constitution et au bonheur de tous.</p>
<p>En  conséquence, l&#39;Assemblée Nationale reconnaît et déclare, en présence et  sous les auspices de l&#39;Etre suprême, les droits suivants de l&#39;Homme et  du Citoyen.</p>
<p><strong>Art. 1er.</strong> Les hommes naissent et  demeurent libres et égaux en droits. Les distinctions sociales ne  peuvent être fondées que sur l&#39;utilité commune.</p>
<p><strong>Art. 2.</strong> Le but de toute association politique est la conservation des droits  naturels et imprescriptibles de l&#39;Homme. Ces droits sont la liberté, la  propriété, la sûreté, et la résistance à l&#39;oppression.</p>
<p><strong>Art. 3.</strong> Le principe de toute Souveraineté réside essentiellement dans la  Nation. Nul corps, nul individu ne peut exercer d&#39;autorité qui n&#39;en  émane expressément.</p>
<p><strong>Art. 4.</strong> La liberté consiste à pouvoir faire tout ce qui ne nuit pas à autrui : ainsi, l&#39;exercice des  droits naturels de chaque homme n&#39;a de bornes que celles qui assurent  aux autres Membres de la Société la jouissance de ces mêmes droits. Ces  bornes ne peuvent être déterminées que par la Loi.</p>
<p><strong>Art. 5.</strong>  La Loi n&#39;a le droit de défendre que les actions nuisibles à la Société. Tout ce qui n&#39;est pas défendu par la Loi ne peut être empêché, et nul  ne peut être contraint à faire ce qu&#39;elle n&#39;ordonne pas. </p>
<p><strong>Art. 6.</strong> La Loi est l&#39;expression de la volonté générale. Tous les Citoyens ont  droit de concourir personnellement, ou par leurs Représentants, à sa  formation. Elle doit être la même pour tous, soit qu&#39;elle protège, soit  qu&#39;elle punisse. Tous les Citoyens étant égaux à ses yeux sont également admissibles à toutes dignités, places et emplois publics, selon leur  capacité, et sans autre distinction que celle de leurs vertus et de  leurs talents. </p>
<p><strong>Art. 7.</strong> Nul homme ne peut être  accusé, arrêté ni détenu que dans les cas déterminés par la Loi, et  selon les formes qu&#39;elle a prescrites. Ceux qui sollicitent, expédient,  exécutent ou font exécuter des ordres arbitraires, doivent être punis ;  mais tout citoyen appelé ou saisi en vertu de la Loi doit obéir à  l&#39;instant : il se rend coupable par la résistance. </p>
<p><strong>Art. 8.</strong> La Loi ne doit établir que des peines strictement et évidemment  nécessaires, et nul ne peut être puni qu&#39;en vertu d&#39;une Loi établie et  promulguée antérieurement au délit, et légalement appliquée. </p>
<p><strong>Art. 9.</strong> Tout homme étant présumé innocent jusqu&#39;à ce qu&#39;il ait été déclaré coupable, s&#39;il est jugé indispensable de l&#39;arrêter, toute rigueur qui ne serait  pas nécessaire pour s&#39;assurer de sa personne doit être sévèrement  réprimée par la loi. </p>
<p><strong>Art. 10.</strong> Nul ne doit être  inquiété pour ses opinions, même religieuses, pourvu que leur  manifestation ne trouble pas l&#39;ordre public établi par la Loi.</p>
<p><strong>Art. 11.</strong> La libre communication des pensées et des opinions est un des droits les  plus précieux de l&#39;Homme : tout Citoyen peut donc parler, écrire,  imprimer librement, sauf à répondre de l&#39;abus de cette liberté dans les  cas déterminés par la Loi.</p>
<p><strong>Art. 12.</strong> La garantie  des droits de l&#39;Homme et du Citoyen nécessite une force publique : cette force est donc instituée pour l&#39;avantage de tous, et non pour l&#39;utilité particulière de ceux auxquels elle est confiée.</p>
<p> <strong>Art. 13.</strong> Pour l&#39;entretien de la force publique, et pour les dépenses  d&#39;administration, une contribution commune est indispensable : elle doit être également répartie entre tous les citoyens, en raison de leurs  facultés.</p>
<p><strong>Art. 14.</strong> Tous les Citoyens ont le droit de constater, par eux-mêmes ou par leurs représentants, la nécessité de la contribution publique, de la consentir librement, d&#39;en suivre  l&#39;emploi, et d&#39;en déterminer la quotité, l&#39;assiette, le recouvrement et  la durée. </p>
<p><strong>Art. 15.</strong> La Société a le droit de demander compte à tout Agent public de son administration.</p>
<p><strong>Art. 16.</strong> Toute Société dans laquelle la garantie des Droits n&#39;est pas assurée, ni la  séparation des Pouvoirs déterminée, n&#39;a point de Constitution.</p>
<p><strong>Art. 17.</strong> La propriété étant un droit inviolable et sacré, nul ne peut en être  privé, si ce n&#39;est lorsque la nécessité publique, légalement constatée,  l&#39;exige évidemment, et sous la condition d&#39;une juste et préalable  indemnité.</p>
</div>
html { padding: 0px; }
body {
  font-family: Verdana, Arial;
  font-size: 16px;
  line-height: 1.34;
}
article, div {
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}
article.justified {
  hyphens: auto;
  text-align:justify;
  text-wrap:pretty;
}
article  {
  hyphens: none;
  text-align:left;
  text-wrap:auto;
}
.image-example {
  float: left;
  background-color: #555555;
  width: 400px;
  height: 120px;
  text-align:center;
  color: #FFFFFF;
  padding-top: 60px;
  margin: 5px 20px 10px 0;
}
code {
    background: #eee none repeat scroll 0 0;
    border-radius: 4px;
    font-size: 90%;
    margin: 0 3px 0 1px;
    padding: 0 5px 2px;
    position: relative;
    top: -1px;
}
document.querySelectorAll('input').forEach(el => {
  el.addEventListener("change", function(e) {
document.querySelector('article').classList.toggle('justified')  
}, false)
})

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js