Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 days ago.
This post was edited and submitted for review 4 days ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I'm fetching data from an API with axios in a react native project, the problem is I get the data with html tags and styles, is there a library or a way I can modify these styles? I've tried the react library htmlRENDER which allows me to render the data in react native, but I can't modify the html classes and id's. Below I leave the html data as I see it in my terminal when fetched:
<section id=\"pdpTerminos\">
\n
<div class=\"container\">
\n
<div style=\"\">
\n <p style=\"font-size: 16px;\">\n Prueba de diagnóstico por imágenes que permite la detección oportuna del cáncer que se utiliza como estudio complementario tras la realización de una mastografía.\n </p>\n <p style=\"color: #0063a6;font-weight: 600;font-family: 'product_sansbold';\"><strong>¿Qué incluye?</strong></p>\n
<p>Mastografía con ultrasonido</p>
\n
</div>
\n
</div>
\n
<div class=\"container\">
\n
<div class=\"incluye mb-5\">
\n
<div class=\"row\">
\n <div style=\"width:100%; float:left;font-size:20px;\">\n
<h2>\n <span class=\"title\"\n style=\"color: #0063a6;font-size:20px;margin: 5px 0;font-weight: 600;font-family: 'product_sansbold';\">\n <strong>Información del servicio</strong></span>\n </h2>
\n <p style=\"font-weight: 600;margin-top: 2rem;\">\n
<span style=\"font-size:20px;\"><strong>Mastografía con ultrasonido</strong></span>\n </p>\n\n
<p>\n El ultrasonido mamario permite revisar la mama de manera más específica cuando se requiere analizar alguna región en particular, o bien, permite diferenciar los nódulos sólidos de los quísticos, algo que no puede hacer la mastografía. También sirve como guía para intervenciones quirúrgicas o biopsias, además de ser un método seguro, no invasivo y que no utiliza radiación. \n
<br><br>Esta prueba se puede realizar en mujeres antes de los 30 años de edad y se considera un estudio complementario
de la mastografía. \n <br><br>Consulta a tu médico acerca de las mejores opciones para una vida saludable.\n
</p>
\n
</div>
\n
</div>
\n \n
</div>
\n <div class=\"terminos\" style=\"float: left;\">\n <h2 style=\"font-weight: 600;margin-top: 2rem;\"><span style=\"font-size:20px;color: #0063a6;font-family: 'product_sansbold';\">\n <strong>Términos y condiciones</strong>\n </span>\n </h2>\n <ul class=\"mt-3\" style=\"list-style: none; padding:0;margin-top: 1rem;font-size:20px;\">\n
<li >- Precio con IVA incluido.</li>
\n
<li >- Pago en un sola exhibición.</li>
\n
<li >- No aplica con otras promociones. </li>
\n
<li >- Precio exclusivo en linea. </li>
\n
<li >- Vigencia al 31 de Diciembre 2022. </li>
\n </ul>\n </div>\n </div>\n
</section>
Related
I am re-making a website that takes tests. It was on PHP and now we are taking it to TypeScript.
I am using React and Material UI to display the feedback for the correct answer and explanation when the user sends their answer.
I get the feedback from an old database they were using (and that we will still use), and what they used to do was create a variable called html (string), and then concatenate each part of the html code raw.
Something like this: (in PHP .= and . is what you use to concatenate)
$html = '';
$html = '<div>';
$html .= '<p class="maintext"><span>' . $some_variable_they_want_in_span . '</span>';
$html .= $some_other_variable_that_is_empty_or_not_depending_on_if_clause . '</p>';
$html .= '</div>';
it is a pain... but the thing is. Now that I am showing the feedback, it comes in a terrible format that I can't simply show in a Typography element (Material UI, but I couldn't in a -p- tag either).
The text is, for example, this one:
" <p>Artículo séptimo.\n</p><p>1. En el ejercicio de sus funciones, los miembros de las Fuerzas y Cuerpos de Seguridad tendrán a todos los efectos legales el carácter de AGENTES DE LA AUTORIDAD.\n</p><p>2. Cuando se cometa delito de atentado, empleando en su ejecución armas de fuego, explosivos u otros medios de agresión de análoga peligrosidad, que puedan poner en peligro grave la integridad física de los miembros de las Fuerzas y Cuerpos de Seguridad, tendrán al efecto de su protección penal LA CONSIDERACIÓN DE AUTORIDAD.\n</p><p>3. La Guardia Civil sólo tendrá consideración de fuerza armada en el cumplimiento de las misiones de carácter militar que se le encomienden, de acuerdo CON EL ORDENAMIENTO JURÍDICO.\n</p><p>\n</p> "
How can I show this in a readable and nice text? I tried some npm packages and passing it through decodeURI but no change. Any ideas? Some text will even come with something like
"Artículo 2. Secretaría de Estado de Seguridad.<div>Corresponde a la persona titular de la Secretaría de Estado de Seguridad el ejercicio de las funciones a las que se refiere el artículo 62 de la Ley 40/2015, de 1 de octubre, y en particular, la dirección, coordinación y supervisión de los órganos directivos dependientes de la Secretaría de Estado, bajo la inmediata autoridad de la persona titular del Ministerio, para el ejercicio de las siguientes funciones: </div><ul><li><span style=\"letter-spacing: -0.015rem;\">El ejercicio del mando de las Fuerzas y Cuerpos de Seguridad DEL ESTADO, y la COORDINACIÓN Y SUPERVISIÓN DE LOS SERVICIOS Y MISIONES QUE LES CORRESPONDEN.</span></li></ul>"
Ok! So one of my coworkers found this solution:
import textParserTest from "~/utils/textparser"; // (which uses in its code the following: import parse from "html-react-parser";)
...
<div
contentEditable="true"
dangerouslySetInnerHTML={{
__html: textParserTest(props.question.answer, 0)
.toString()
.replaceAll("\\n", ""),
}}
></div>
So basically. html-react-parser package did the trick
I am programming a simple web app. I have the following xml :`
<pelis>
<nombre id="avengers">Valoracion de Avengers Engame
<Valoracion>Calificacion general: 7.5</Valoracion>
<Valorpro>Calificacion de Cartelera Tinajo: 8</Valorpro>
<ComentariosP>Positivo: Buena pelicula, con un argumento interesante y envolvente. Las escenas estan bien rodadas y las coreografias bien ejecutadas. La banda sonora es buena, asi como el vestuario y sobre todo el maquillaje y los efectos especiales.</ComentariosP>
<ComentariosN>Negativo: Demasiado larga para nuestro gusto. Algunos fallos de guion y de realizacion. El sonido en algunas escenas es demasiado elevado y poco claro. El argumento es predecible desde muy temprano.</ComentariosN>
</nombre>
<nombre id="mamma">Valoracion de Mamma Mia!
<Valoracion>Calificacion general: 8</Valoracion>
<Valorpro>Calificacion de Cartelera Tinajo: 8</Valorpro>
<ComentariosP>Positivo: Pelicula muy recomendable. Unifica una comedia elaborada con una trama interesante y adictiva. La banda sonora de ABBA es impecable, sumado a un escenario espectacular, asi como unas coreografias muy elaboradas.</ComentariosP>
<ComentariosN>Negativo: Guion predecible. En algunas partes se hace un poco aburrida y no consigue captar al espectador. </ComentariosN>
</nombre>
<nombre id="hobbit">Valoracion de El Hobbit
<Valoracion>Calificacion general: 8</Valoracion>
<Valorpro>Calificacion de Cartelera Tinajo: 10</Valorpro>
<ComentariosP>Positivo: Gran película. Al igual que sus predecesoras (El señor de los Anillos I,II y III), es una obra de arte. Música impresionante, universo envolvente, escenas increibles, trama interesante, vestuario peculiar y una infinidad de aspectos positivos.</ComentariosP>
<ComentariosN>Negativo: El unico punto negativo es que puede ser un poco larga</ComentariosN>
</nombre>
<nombre id="hotel">Valoracion de Hotel Transilvania
<Valoracion>Calificacion general: 8.5</Valoracion>
<Valorpro>Calificacion de Cartelera Tinajo: 8</Valorpro>
<ComentariosP>Positivo: Una comedia para toda la familia. Peculiar en gran medida, dado que enfoca a los monstruos como seres humanizados. Buena trama, actores conocidos. Muy entretenida.</ComentariosP>
<ComentariosN>Negativo: No tiene ningun punto negativo destacable</ComentariosN>
</nombre>
<nombre id="lobo">Valoracion de El Lobo de Wall Street
<Valoracion>Calificacion general: 8</Valoracion>
<Valorpro>Calificacion de Cartelera Tinajo: 9</Valorpro>
<ComentariosP>Positivo: Una pelicula muy curiosa. Cuenta con grandes actores, un guion elaborado, unas escenas muy bien rodadas. Se sigue con gran interes y tiene giros que la convierten en un peliculon</ComentariosP>
<ComentariosN>Negativo: Demasiado larga (3 horas de duracion)</ComentariosN>
</nombre>
</pelis>`
and I also have the following XSL to transform it to HTML:
What I want is that all the text that will be shown in the html have carriage return after every line. I have tried adding and also what you can see in the code, but it doesnt work.
Because XSLT output is HTML, you can use <br/> for that. Or CSS for the <p> tag.
A NL or CR character in an HTML document displays as an ordinary space in the browser. If you want text to start on a new line when rendered in the browser, you typically want to output a <br> element.
I have padding set on a div for the main text on my pages, but have it set to disappear at 700px with a media query. For some reason, it's not working and I don't know why. Below is a code pen and my code. Thank you!
Code Pen: http://codepen.io/caguilera0001/pen/EgWzgz
#contentOne {
height: 100%;
/*** change to 100% once all is put in ***/
width: 100%;
background-color: #4484CE;
z-index: 1;
}
#blue {
background-color: #4484CE;
width: 100%;
height: 40px;
}
#gray {
width: 100%;
height: 100%;
/*** change to 100% once all is put in ***/
background-color: #D9D9D9;
}
#title {
padding-top: 30px;
padding-left: 114px;
font-size: 32px;
font-weight: bold;
color: #000;
margin: 10px;
}
#text {
padding-top: 30px;
padding-left: 114px;
margin: 10px;
padding-right: 98px;
height: 100%;
}
#media all and (max-width: 700px) {
#text {
padding-left: none;
padding-right: none;
}
#title {
line-height: 1em;
}
}
<div id="main">
<div id="contentOne">
<div id="blue">
<!-- this is blue for navbar -->
</div>
<!-- end blue -->
<div id="gray">
<!-- this is gray for main/content one -->
<div id="title">Attendance Office</div>
<div id="text">
<p><strong>(323)993-3408</strong>
</p>
<p><strong>The Attendance Office is open from 7:00am to 3:30 pm.</strong> We are here to help you with absences, contact information update, enrollment, check-outs, etc.<strong> </strong>
</p>
<p>Attendance at school is extremely important. By state law, a student who has more than 3 unexcused absences is determined to be in violation of the truancy laws.</p>
<p>The following is a listing of the only reasons that are excusable:</p>
<ul type="disc">
<li>Due to his or her illness</li>
<li>Due to quarantine under the direction of a county or cit health officer</li>
<li>For the purpose of having medical, dental, optometric or chiropractic services rendered</li>
<li>For the purpose of attending the funeral services of a member of his or her immediate family</li>
<li>For the purpose of jury duty in the manner provided by law</li>
<li>Due to the illness or medical appointment during school hours of a child whom the pupil is the custodial parent</li>
<li>With Prior Principal Approval, for justifiable personal reasons including, but not limited to, an appearance in court, attendance at a funeral service past the allowable day(s), observance of a holiday or ceremony of his/her religion, attendance
at religious retreats or attendance at an employment conference when the pupil's absence has been requested in writing, prior to the absence, by the parent/guardian and approved by the principal.</li>
<li>With Prior Principal Approval, for the purpose of serving as a member of a precinct board for an election pursuant to Section 12302 of the Election Code.</li>
<li>Pupils who are members of religions that observe religious holidays that fall on school days may be excusable from school by making prior arrangements, as specified by the school principal and with written parental/guardian request.</li>
</ul>
<p><strong>PLEASE NOTE THAT THE ABOVE REASONS ARE THE ONLY REASONS THAT WILL <u>NOT</u> TRIGGER A TRUANCY LETTER. </strong>
</p>
<p><strong>BELOW ARE SOME EXAMPLES OF UNEXCUSED ABSENCES: </strong>
</p>
<p>Three or more of the following excuses will trigger a Truancy letter:</p>
<ul type="disc">
<li>Running errands for family</li>
<li>Vacations or trips</li>
<li>Unverified illness</li>
<li>Family emergency</li>
<li>Transportation problems</li>
<li>Inclement weather</li>
<li>Babysitting</li>
<li>Absent from class without school or parent/guardian permission</li>
<li>Absence uncleared for more than 10 school days despite due diligence efforts to obtain an explanation from the parent/guardian</li>
<li>Unexcused tardy for 30 minutes or more</li>
<li>No note from parent/guardian</li>
</ul>
<p><strong>Leaving School Early:</strong>
<br />
<br />Students upon arriving on campus are not to leave school for any reason without permission. Students needing to leave early must be picked up by a parent/guardian/adult that is on the emergency card. Only those listed in the emergency card are
able to pick up students out of school and <u>must present a picture ID every time</u>.
<br />
<br />
<strong>To Enroll a Student in Bancroft Middle School:</strong>
<br />
<br />You will need the following items completed prior to registration:
<br />Last report card
<br />Parent/guardian picture ID
<br />Birth certificate
<br />Immunization records (must be up to date)
<br />Address verification (Utility bill, Gas, Water, or Light only) in Parent's name. (You cannot use telephone bill)
<br />
<br />
<strong>PARENTS/GUARDIANS ARE REQUIRED TO REPORT TO THE ATTENDANCE OFFICE, IN WRITING, A CHANGE OF ADDRESS OR CONTACT INFORMATION WITHIN 30 CALENDAR DAYS OF THE CHANGE. PROOF OF THIS CHANGE IS ALSO REQUIRED. FAILURE TO DO SO MAY BE CAUSE FOR FORFEITURE OF THE RIGHT TO A CONTINUING ENROLLMENT PERMIT. STUDENTS WILL BE TRANSFERRED TO THE SCHOOL OF RESIDENCE IF FALSE OR INACCURATE RESIDENCE INFORMATION IS DISCOVERED.</strong>
</p>
<p><strong> </strong>Click here for the Attendance Policy
</p>
<p> </p>
<p> </p>
<p><strong>La oficina de asistencia está abierta está abierta de 7:00am a 3:30 pm.</strong> Estamos aquí para servirle con respecto a ausencias, actualización de información de emergencia, inscripciones, dadas de baja, etc.<strong> </strong>
</p>
<p>Asistencia a clases es extremadamente importante. Por las leyes del estado un estudiante que tiene más de 3 ausencias sin excusa es considerada una violación de las leyes de asistencia.
<br /> La siguiente lista provee las únicas razones para ausencia excusada:</p>
<ul>
<li>Enfermedad o lesión del alumno</li>
<li>Cuarentena</li>
<li>Servicios médicos, dentales, oftalmológicos o quiroprácticos</li>
<li>Asistencia a funeral de un miembro de la familia directo, P.ej. madre, padre, abuelo, abuela, hermano, hermana, o cualquier familiar que viva en el mismo domicilio que el alumno (un día si es en el Estado, tres días fuera del Estado)</li>
<li>Obligación de jurado</li>
<li>Enfermedad o tratamiento médico de un niño cuya patria potestad sea del alumno.</li>
</ul>
<p>Las Razones Personales Justificables de una ausencia son aquellas que se presentan por escrito, por parte del padre de familia, y <u>son aprobadas por el director</u>. Las ausencias que encuadran en esta categoría, incluyen entre otras:</p>
<ul>
<li>Servicio militar activo en zona de combate (miembro directo de la familia -máximo tres días)</li>
<li>Comparecencia en un tribunal o Asistencia a servicios funerarios (extensión de días)</li>
<li>Asistencia a un retiro religioso (que no exceda cuatro horas por semestre)</li>
<li>Industria del entretenimiento (no más de cinco días de ausencia consecutiva o un máximo de cinco ausencias por año escolar)</li>
<li>Exclusión o exención médica</li>
<li>Conmemoración religiosa, feriado cultural, ceremonia y secular histórica.</li>
<li>Instrucción religiosa (asistir a jornada escolar mínima no más de cuatro días por mes escolar)</li>
<li>Suspensión revocada mediante el proceso de apelaciones</li>
<li>Participación en una organización no lucrativa de artes escénicas (máximo cinco por año escolar)</li>
<li>Servicios de salud mental previamente coordinados (Tratamiento Diurno de Salud Mental)</li>
<li>“Día de Llevar a Nuestros Hijos e Hijas a la Escuela ®”</li>
</ul>
<p><strong>POR FAVOR NOTE QUE LAS RAZONES MECIONADAS ARRIBA SON LAS UNICAS RAZONES QUE <u>NO</u> CREARAN UNA CARTA DE AUSENCIAS INJUSTIFICADAS. </strong>
</p>
<p><strong>ABAJO ESTA LA LISTA DE EJEMPLOS DE AUSENCIAS NO JUSTIFICADAS: </strong>
</p>
<p>Tres o más de este tipo de ausencias hará una carta de ausencias no excusadas:</p>
<ul type="disc">
<li>Hacer diligencias para el padre/tutor</li>
<li>Vacaciones o viajes</li>
<li>Enfermedades sin verificación</li>
<li>Problema de transporte</li>
<li>Inclemencias del clina</li>
<li>Cuidar de niños menores</li>
<li>Ausencia a clase sin permiso de la escuela o padre/tutor</li>
<li>Ausencia sin nota de padre/tutor</li>
</ul>
<p><strong>Salir temprano de la escuela:</strong>
<br />
<br />Ya que los estudiantes entran a la escuela no pueden salir por ninguna razón sin permiso de la escuela. Los estudiantes que necesiten salir temprano deberán ser recogidos por un padre/tutor/adulto que este listado en la tarjeta de emergencia.
Solamente aquellos listados en la tarjeta de emergencia podrán pasar por el estudiante y <u>deben presentar identificación fon fotografía cada vez</u> que vengan por el estudiante.
<br />
<br />
<strong>Para inscribir a un estudiante a Bancroft Middle School:</strong>
<br />
<br />Usted tendrá que presentar los siguientes documentos antes de inscripción:
<br />Última boleta de calificaciones
<br />Identificación con fotografía del padre/tutor
<br />Certificado de nacimiento
<br />Cartilla de vacunas (actualizada)
<br />Comprobante de domicilio (factura de gas, agua o luz solamente) en el nombre del padre/tutor. (No se aceptan facturas de teléfono)
<br />
<br />
<strong>ES REQUERIDO QUE LOS PADRES/TUTORES REPORTEN POR ESCRITO A LA OFICINA DE ASISTENCIA CUANQUIER CAMBIO DE DIRECCION O CONTACTO DENTRO DE LOS 30 DIAS DEL CAMBIO. COMPROBANTE DE DOMICILIO ES REQUERIDO. EL NO HACER ESTO PUEDE CAUSAR LA PERDIDA DE ESPACIO EN LA ESCUELA Y EL ESTUDIANTE SERA TRANSFERIDO A SU ESCUELA DE RESIDENCIA SI SE NCUENTRA QUE LA INFORMACION PROVEEIDA ES FALSA O INCORRECTA.</strong>
</p>
<p>Clic aquí para la política de asistencia
</p>
</div>
<!-- end text-->
</div>
<!-- end gray -->
</div>
<!-- end content one -->
</div>
<!-- end main -->
none is not a valid value for padding.
#text{
padding-left: none;
padding-right: none;
}
Should be:
#text{
padding-left: 0;
padding-right: 0;
}
I'm trying to extract some news articles from a webpage, but the html structure changes for some of these articles.
In one case I have this:
and in another case I have this:
Is there a XPath I can use that could extract the full text on both cases?
EDIT
For the fist case I have tried this (using scrapy shell):
response.xpath('//*[#class="mioloNoticia"]/article/text()').extract()
which results in:
[u'\r\n ',
u'\r\n ',
u'\r\n ',
u'\r\n ',
u'\r\n ',
u'\r\n ',
u'Entendo as raz\xf5es dos defensores do acordo ortogr\xe1fico. Tamb\xe9m entendo as raz\xf5es pelas quais uma criatura acredita que \xe9 Napole\xe3o Bonaparte. ',
u'Mais dif\xedcil de compreender \xe9 o motivo que leva uma classe pol\xedtica inteira a seguir com respeito Napole\xe3o Bonaparte. O problema do acordo nem sequer \xe9 t\xe9cnico ou jur\xeddico. Isso \xe9 \xf3bvio: qualquer um sabe que aquilo \xe9 uma aberra\xe7\xe3o lingu\xedstica (a grafia como mera transcri\xe7\xe3o fon\xe9tica?) e uma ilegalidade completa (lembrar as acrobacias jur\xeddicas que se fizeram sobre o texto original). Sem falar da ambi\xe7\xe3o autorit\xe1ria de submeter 300 milh\xf5es de falantes a um capricho racionalista. ',
u'O problema do acordo \xe9 termos tido v\xe1rios governos que, reverentes e analfabetos, foram ratificando, modificando e legislando como se o acordo fosse mesmo para levar a s\xe9rio. Se Marcelo ajudar a acabar com esta farsa, a sua Presid\xeancia j\xe1 ter\xe1 valido a pena.']
and for the second case I have tried:
response.xpath('//*[#class="mioloNoticia"]/article/p/text()').extract()
which results in a better extraction:
[u'Os c\xe1lculos na ves\xedcula, os sintomas de um reumatismo que o atacava quando o Outono se aproximava ou a certeza de que o fim das coisas era inevit\xe1vel abriam-lhe a porta ao pessimismo em geral e \xe0 descren\xe7a no futuro \u2013 mas a vis\xe3o de um mundo encavalitado \xe0s costas do "progresso" era o aspecto mais penoso da exist\xeancia. A esta dist\xe2ncia, compreendo-o; ser "contra o progresso" \xe9 nos nossos dias um pecado capital, e resmungar contra "a criatividade" tornou-se uma apostasia definitiva e dram\xe1tica.',
u'O "ser humano" est\xe1 condenado a acreditar na criatividade sem limites, na originalidade, no progresso, na mudan\xe7a e, finalmente, na ideia de que as coisas novas s\xe3o sempre superiores \xe0s antigas. Isto pode fazer confus\xe3o a um velho do Alto Minho, educado pela vida (e pelos desaires) a apreciar as coisas que permanecem e a desconfiar das inven\xe7\xf5es em que n\xe3o v\xea grande utilidade.',
u'A minha sobrinha Maria Lu\xedsa \u2013 a eleitora esquerdista da fam\xedlia \u2013 j\xe1 foi uma sacerdotisa do Progresso (com mai\xfascula). Hoje, desconfia bastante da direc\xe7\xe3o que as coisas tomam, e o seu optimismo em rela\xe7\xe3o \xe0 esp\xe9cie humana \xe9 morigerado. Alimento a esperan\xe7a, dissimulada por muita cautela e certo tom de ironia, de v\xea-la feliz como Dona Ester, minha m\xe3e, gostava de ver felizes os seus filhos, espalhados sobre o areal da praia de Afife, respirando o iodo da tarde e abrigando-se do vento galego que descia pelo litoral. Os sucessos e insucessos dos \xfaltimos setenta anos ensinaram-me a desejar pouco, a aceitar a grandeza das coisas desconhecidas, a reler os livros que j\xe1 foram belos algum dia, a manter alguma f\xe9 numa ordem que comanda os planetas ou a solid\xe3o das dunas de Moledo. Ao mesmo tempo, esse ego\xedsmo n\xe3o faz mal aos outros. N\xe3o exige muito deles. N\xe3o lhes oferece demasiadas desilus\xf5es, nem utopias, nem promessas v\xe3s de um mundo perfeito. N\xe3o lhes alimenta a f\xe9 nas coisas imposs\xedveis que exigem que os outros mudem para que n\xf3s possamos satisfazer os desejos pessoais.',
u'Esse mundo perfeito existe, sim \u2013 mas terminou h\xe1 muito, antes do progresso, da democracia e dos d\xe9fices da economia. Tamb\xe9m \xe9 preciso lembrar que n\xe3o se pode voltar atr\xe1s nem \xe9 poss\xedvel recuperar o tempo perdido. O que est\xe1 perdido, est\xe1 perdido. O que passou, passou h\xe1 muito.']
But I'm after a single XPath that could word for both cases.
If the only different between different articles are plain text or text within tags the xpath is quite simple
//article/text() | //article/p/text()
This will extract both whether one of them exists or both
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
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