2

I would like to put the header numberings in the margin. Here is an example:

As you can observe, the number are right-aligned in the margin and the text header are justified on the principal margin.

Is it possible to make a little example on JSFiddle, please? Here is my test: https://jsfiddle.net/79ehtbqb/1/

<div class="container">

<h1><span class="number">2</span>Le stockage de l'énergie</h1>

<div class="box">
    <div class="toc-h1"><span class="number">2.1</span>Le stockage de l'énergie</div>
    <div class="toc-h1"><span class="number">2.2</span>Les défis du secteur de l'énergie</div>
    <div class="toc-h1"><span class="number">2.3</span>One-dimensional Momentum</div>
    <div class="toc-h2"><span class="number">5.2.1</span>Conservation de la quantité de mouvement</div>
    <div class="toc-h2"><span class="number">5.2.2</span>Bernouilli</div>
    <div class="toc-h2"><span class="number">5.2.3</span>La poussée</div>
    <div class="toc-h2"><span class="number">5.2.4</span>Le facteur d'induction axial</div>
</div>

<h2><span class="number">2.1</span>Le stockage de l'énergie</h2>

<p>Face à la menace que représente le réchauffement climatique pour l’ensemble de l’humanité, des accords internationaux ont été conclus, qui engagent les Etats signataires sur des objectifs de maîtrise de l’énergie et de réduction des émissions de gaz à effet de serre.</p>

<h3><span class="number">2.1.1</span>Le stockage de l'énergie</h3>

<p>Face à la menace que représente le réchauffement climatique pour l’ensemble de l’humanité, des accords internationaux ont été conclus, qui engagent les Etats signataires sur des objectifs de maîtrise de l’énergie et de réduction des émissions de gaz à effet de serre.</p>

Note: to hyphenate the text, I will used Hyphenator.js

Community
  • 1
  • 1
PeterMacGonagan
  • 55
  • 8
  • Try stuff out. Google specific problems ("justify text css" ). Make changes, see how it went etc When you hit something you just cannot find, and nothing you've tried worked - then create a stackoverflow question :) – Gerino Feb 12 '15 at 14:20
  • try something first http://stackoverflow.com/questions/4264527/vertical-text-direction and http://jsfiddle.net/singhakash07/45adbvx4/ .If you got any problem post again with code . – singhakash Feb 12 '15 at 14:47
  • Thank you very much for your example singhakash. However, the text is not centered with the line... – PeterMacGonagan Feb 13 '15 at 09:58
  • Ok, I reply to myself: https://jsfiddle.net/79ehtbqb/3/ – PeterMacGonagan Feb 13 '15 at 23:51

0 Answers0