3

Actualmente estoy produciendo un texto HTML que intento alinear, lo estoy haciendo a la bruto, usando  .

Este es un ejemplo (no hagan caso de los <font color ... eso lo pienso mejorar por CSS):

<div class="page_break"><font color="red"><b>≡ SALMO</b>&nbsp;&nbsp;&nbsp;&nbsp;Sal 110, 1-2. 3-4. 5-6</font><br /><br />
  <font color="red">El Señor recuerda siempre su alianza</font><br /><br />
  <font color="red">℣. </font>&nbsp;&nbsp;&nbsp;&nbsp;Doy gracias al Señor de todo corazón, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;en compañía de los rectos, en la asamblea. <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Grandes son las obras del Señor, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dignas
  de estudio para los que las aman.
  <font color="red"> ℟.</font><br /><br />
  <font color="red">℣. </font>&nbsp;&nbsp;&nbsp;&nbsp;Esplendor y belleza son su obra, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;su justicia dura por siempre. <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ha hecho maravillas memorables, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el
  Señor es piadoso y clemente.
  <font color="red"> ℟.</font><br /><br />
  <font color="red">℣. </font>&nbsp;&nbsp;&nbsp;&nbsp;Él da alimento a sus fieles, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recordando siempre su alianza. <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mostró a su pueblo la fuerza de su obrar, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dándoles
  la heredad de los gentiles.
  <font color="red"> ℟.</font>
</div>

El tipo de alineación que yo necesito es este (que la primera línea de cada estrofa quede alineada con las líneas que siguen):

introducir la descripción de la imagen aquí

No se resuelve añadiendo uno o dos o tres &nbsp;, nunca queda perfectamente alineando, y si cambio de tamaño de letra para presentarlo en un HTML se vuelve un desastre. Además, quiero renunciar a &nbsp; para esto.

¿Existe en CSS alguna técnica para hacer este tipo de alineaciones?

1
  • 1
    Un margin-right al <b> que engloba la palabra salmo debería resolver, lo otro lo puedes hacer mejor con <ul>, es decir una lista y te deja el formato de esa manera.
    – zerocool
    Commented el 11 oct. 2018 a las 19:13

3 respuestas 3

6

1) Borremos todo lo innecesario y dejemoslo simple, es decir envolvemos cada párrafo en un contenedor y quita todos los espacios innecesarios.

<p class="parrafo">Doy gracias al Señor de todo corazón, <br />
    en compañía de los rectos, en la asamblea. <br />
    Grandes son las obras del Señor, <br />
    dignas de estudio para los que las aman.
</p>

2) Te recomiendo llamar los 2 símbolos con los pseudoelementos ::before y ::after en cada uno de los párrafos. Así:

.salmo .parrafo::before{
  content: '℣.';
}

.salmo .parrafo::after{
  content: '℟.';
}

.salmo .parrafo::before,
.salmo .parrafo::after{
  color: #ed462f; /*Con esto pintas ambos del color rojo*/
}

3) A todos los párrafos a excepción de los dos primeros, les vamos a asignar una posición relativa y un espaciado externo con margin a la izquierda. Para el color podemos usar border o en mi ejemplo una sombra:

.salmo .parrafo{
  margin-left: 40px; /*O el espacio que consideres*/
  position: relative;
  box-shadow: -7px 0 0 #49a99d;
}

4) Al primer símbolo lo vamos a sacar del flujo regular del html con una posición absoluta y lo ubicamos a la izquierda a la misma distancia negativa que asignamos de margen en el párrafo:

.salmo .parrafo::before{
  content: '℣.'; /*<-- Esta línea ya la habíamos puesto arriba*/
  position: absolute;
  left: -40px;
}

Y listo! Al paso que llevamos tendrás algo como esto:

.salmo .parrafo::before{
  content: '℣.'; /*<-- Esta línea ya la habíamos puesto arriba*/
  position: absolute;
  left: -40px;
}

.salmo .parrafo::after{
  content: '℟.';
}

.salmo .parrafo::before,
.salmo .parrafo::after{
  color: #ed462f; /*Con esto pintas ambos del color rojo*/
}

.salmo .parrafo{
  margin-left: 40px; /*O el espacio que consideres*/
  position: relative;
  box-shadow: -7px 0 0 #49a99d;
}
<div class="page_break salmo">
  <p><b>≡ SALMO</b> Sal 110, 1-2. 3-4. 5-6</p>
  <p>El Señor recuerda siempre su alianza</p>

  <p class="parrafo">Doy gracias al Señor de todo corazón, <br />
    en compañía de los rectos, en la asamblea. <br />
    Grandes son las obras del Señor, <br />
    dignas de estudio para los que las aman.
  </p>
  <p class="parrafo">
    Esplendor y belleza son su obra, <br />
    su justicia dura por siempre. <br />
    Ha hecho maravillas memorables, <br />
    el Señor es piadoso y clemente.
  </p>
  <p class="parrafo">
    Él da alimento a sus fieles, <br />
    recordando siempre su alianza. <br />
    Mostró a su pueblo la fuerza de su obrar, <br />
    dándoles la heredad de los gentiles.
  </p>
</div>

Lo demás se tratará de acomodar los estilos de acuerdo a lo que quieres lograr, por ejemplo:

.salmo p{
  font-family: sans-serif;
}

.salmo .title,
.salmo .intro
{  
  color: #ed462f;
}

.salmo .intro{
  display: inline-block;
  padding-right: 10px;
}

.salmo p:not(.intro):not(.title){
  margin: 0;
  margin-left: 40px;
  padding: 10px 5px;
  padding-left: 10px;
  position: relative;
  box-shadow: -7px 0 0 #49a99d;
  line-height: 1.2em;
}

.salmo p:not(.salmo):not(.title)::before,
.salmo p:not(.salmo):not(.title)::after{
  color: #ed462f;
}

.salmo p:not(.salmo):not(.title)::before{
  content: '℣.';
  position: absolute;
  left: -40px;
}

.salmo p:not(.salmo):not(.title)::after{
  content: '℟.';
}
<div class="page_break salmo">
  <p class="title"> <b>≡ SALMO</b> Sal 110, 1-2. 3-4. 5-6
  <p class="intro">
    El Señor recuerda siempre su alianza
  </p>

  <p class="parrafo">Doy gracias al Señor de todo corazón, <br />
    en compañía de los rectos, en la asamblea. <br />
    Grandes son las obras del Señor, <br />
    dignas de estudio para los que las aman.
  </p>
  <p class="parrafo">
    Esplendor y belleza son su obra, <br />
    su justicia dura por siempre. <br />
    Ha hecho maravillas memorables, <br />
    el Señor es piadoso y clemente.
  </p>
  <p class="parrafo">
    Él da alimento a sus fieles, <br />
    recordando siempre su alianza. <br />
    Mostró a su pueblo la fuerza de su obrar, <br />
    dándoles la heredad de los gentiles.
  </p>
</div>

En el remoto caso, de que no puedas (o no quieras) agregar clases a cada párrafo dentro de cada salmo, siempre puedes agregar una clase únicamente a los dos primeros párrafos y usar un selector para los otros párrafos que excluya a estos. Ejemplo:

.salmo p:not(.salmo):not(.title){ /*Este sería el selector*/ }

O incluso puedes volverte un hipster y hacer uso solo de los selectores específicos de CSS sin asignar clases a ningún elemento dentro del salmo, algo así:

.salmo p{
  font-family: sans-serif;
}

.salmo p:first-child,
.salmo p:nth-child(2)
{  
  color: #ed462f;
}

.salmo p:first-child b{
  display: inline-block;
  padding-right: 10px;
}

.salmo p:not(:first-child):not(:nth-child(2)){
  margin: 0;
  margin-left: 40px;
  padding: 10px 5px;
  padding-left: 10px;
  position: relative;
  box-shadow: -7px 0 0 #49a99d;
  line-height: 1.2em;
}

.salmo p:not(:first-child):not(:nth-child(2))::before,
.salmo p:not(:first-child):not(:nth-child(2))::after{
  color: #ed462f;
}

.salmo p:not(:first-child):not(:nth-child(2))::before{
  content: '℣.';
  position: absolute;
  left: -40px;
}

.salmo p:not(:first-child):not(:nth-child(2))::after{
  content: '℟.';
}
<div class="page_break salmo">
  <p> <b>≡ SALMO</b> Sal 110, 1-2. 3-4. 5-6
  <p>
    El Señor recuerda siempre su alianza
  </p>

  <p>Doy gracias al Señor de todo corazón, <br />
    en compañía de los rectos, en la asamblea. <br />
    Grandes son las obras del Señor, <br />
    dignas de estudio para los que las aman.
  </p>
  <p>
    Esplendor y belleza son su obra, <br />
    su justicia dura por siempre. <br />
    Ha hecho maravillas memorables, <br />
    el Señor es piadoso y clemente.
  </p>
  <p>
    Él da alimento a sus fieles, <br />
    recordando siempre su alianza. <br />
    Mostró a su pueblo la fuerza de su obrar, <br />
    dándoles la heredad de los gentiles.
  </p>
</div>

O dejando, las locuras de lado lo más simple, es que lo envuelvas todo en un solo contenedor tipo lista <ul> y cada párrafo sea un <li>, ejemplo:

.salmo{
  --red: #ed462f;
  --green: #49a99d;
}

.salmo p,
.salmo li{
  font-family: sans-serif;
}

.salmo p:first-child,
.salmo p:nth-child(2)
{  
  color: var(--red);
}

.salmo p:first-child b{
  display: inline-block;
  padding-right: 10px;
}

.salmo ul{
  list-style: none;
  padding: 0;
}

.salmo li{
  margin: 0;
  margin-left: 40px;
  padding: 10px 5px;
  padding-left: 10px;
  position: relative;
  box-shadow: -7px 0 0 var(--green);
  line-height: 1.2em;
}

.salmo li::before,
.salmo li::after{
  color: var(--red);
}

.salmo li::before{
  content: '℣.';
  position: absolute;
  left: -40px;
}

.salmo li::after{
  content: '℟.';
}
<div class="page_break salmo">
  <p> <b>≡ SALMO</b> Sal 110, 1-2. 3-4. 5-6
  <p>
    El Señor recuerda siempre su alianza
  </p>
  
  <ul>

    <li>Doy gracias al Señor de todo corazón, <br />
      en compañía de los rectos, en la asamblea. <br />
      Grandes son las obras del Señor, <br />
      dignas de estudio para los que las aman.
    </li>
    <li>
      Esplendor y belleza son su obra, <br />
      su justicia dura por siempre. <br />
      Ha hecho maravillas memorables, <br />
      el Señor es piadoso y clemente.
    </li>
    <li>
      Él da alimento a sus fieles, <br />
      recordando siempre su alianza. <br />
      Mostró a su pueblo la fuerza de su obrar, <br />
      dándoles la heredad de los gentiles.
    </li>
  
  </ul>
  
</div>

Si tienes alguna otra duda, no olvides dejar tu comentario.

3
  • Muy buena la respuesta, creo que el mejor acercamiento es como listas. Te pregunto, ¿por qué: .salmo li::before, .salmo li::after{ color: #ed462f; } y no colocarlo directamente a cada una?. Por otra parte no sabía que hacerlo solo con selectores era hipster jaja. Saludos!!!
    – zerocool
    Commented el 12 oct. 2018 a las 12:08
  • jajaja lo digo porque no hay necesidad de usar selectores tan específicos, sólo en situaciones extremas y no justifica su uso simplemente por mostrar conocimiento, a veces lo mejor es el uso de clases porque si te das cuenta de cómo queda el css resultante, inmanejable y más difícil de leer. Al menos en mi opinión. Commented el 12 oct. 2018 a las 15:20
  • Respecto al porqué el color en un selector agrupado, es porque no me gusta repetir código y menos con modificadores de color. Commented el 12 oct. 2018 a las 15:23
2

Te dejo un ejemplo de como lo puedes hacer usando solo css:

.salmo p{
           color: red;
        }
        .salmo p b{ 
            margin-right: 20px;
        }
        .salmo ul {
            list-style: none;
        }
        .salmo ul li:before{
            color: #f00;
            content: '℣';
            float:left;
            margin-left: -20px;
            font-size: 1.2em;
            font-weight: bold;
        }
        .salmo-cierre{
            color: red;
        }
<div class="page_break">
        <div class="salmo">
            <p><b>≡ SALMO</b>Sal 110, 1-2. 3-4. 5-6</p>
            <p>El Señor recuerda siempre su alianza</p>
            <ul>
                <li>
                    Doy gracias al Señor de todo corazón,
                    <br>en compañía de los rectos, en la asamblea. 
                    <br>Grandes son las obras del Señor, 
                    <br>dignas de estudio para los que las aman.<span class="salmo-cierre">℟.</span>
                </li>
            </ul>
        </div>
    </div>

La etiqueta br solo debe utilizarse dentro de la etiqueta p como salto de linea. Para separar elementos se debe utilizar la propiedad margin. Además construyo una capa base que será el cuerpo del salmo, la misma está representada en el css con la clase ".salmo".

Cada "li" que coloques sería un nuevo "parrafo" no se como se llama cada parte del salmo.

Saludos!

1
  • versículos es la definición, semánticamente una lista es lo mas apropiado (se pueden agrupar por rangos ej 1-2, 3-4 etc). luego según el contexto salmo 110 un h1/h2 , "el señor..." un h mas abajo h3/h4. el símbolo de cierre (℟) por lo general indica respuesta que en este caso parece ser implícita. Commented el 11 oct. 2018 a las 22:17
1

Si usas 5 &nbsp; y agregas text-align: justify; parece funcionar.

.page-break {
  text-align: justify;
}
<div class="page_break"><font color="red"><b>≡ SALMO</b>&nbsp;&nbsp;&nbsp;&nbsp;Sal 110, 1-2. 3-4. 5-6</font><br /><br />
  <font color="red">El Señor recuerda siempre su alianza</font><br /><br />
  <font color="red">℣. </font>Doy gracias al Señor de todo corazón, <br/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;en compañía de los rectos, en la asamblea. <br/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Grandes son las obras del Señor, <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dignas de estudio para los que las aman.
  <font color="red"> ℟.</font><br /><br />
  <font color="red">℣. </font>Esplendor y belleza son su obra, <br/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;su justicia dura por siempre. <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ha hecho maravillas memorables, <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el Señor es piadoso y clemente.
  <font color="red"> ℟.</font><br /><br />
  <font color="red">℣. </font>Él da alimento a sus fieles, <br/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recordando siempre su alianza. <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mostró a su pueblo la fuerza de su obrar, <br/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dándoles la heredad de los gentiles.
  <font color="red"> ℟.</font>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.