HTML text formatting

pideja · 2019-11-04 23:58:52

Trying to format HTML text on an album page. These are credits I want to align vertically, in the left pallet (01), with CSS used to set the line height, text-align and font size.
In these credits, there are long names.
My problem is how to set these long names correctly. Tried this:

<div id="main-copy-credits">
<p>Texte de  VOLTAIRE</p>

<p>Mise en scène: ALICE RONFARD</p> 
<p>Décor: DANIÈLE LÉVESQUE</p>     
<p>Éclairages: CÉDRIC DELORME-BOUCHARD</p>  
<p>Costumes: MARIE CHANTAL<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VAILLANCOURT</p>


<p>Du 11 septembre au 6 octobre 2018</p>
</div>

in order for the word "Vaillancourt" to be on a line below "Marie Chantal" and aligned with the "M". Works great when on the W3School tryout page

Texte de VOLTAIRE
Mise en scène: ALICE RONFARD
Décor: DANIÈLE LÉVESQUE
Éclairages: CÉDRIC DELORME-BOUCHARD
Costumes: MARIE CHANTAL
VAILLANCOURT
Du 11 septembre au 6 octobre 2018

(There must be one or two   too many in the example, but it does work.)
but in not in Backlight:
mcv

Maybe there are particulars in the way Backlight interprets HTML?

Last edited by pideja (2019-11-05 00:03:59)

pideja · 2019-11-05 00:51:12

I now use

<html>
<div id="pallet-credits">
<p>Texte de  VOLTAIRE</p> 

<p>Mise en scène: ALICE RONFARD</p>   
<p>Décor: DANIÈLE LÉVESQUE</p>      
<p>Éclairages: CÉDRIC DELORME-BOUCHARD</p>   
<p>Costumes: MARIE CHANTALE</p>
<p>  &nbsp;  VAILLANCOURT</p>


<p>Du 11 septembre au 6 octobre 2018</p>
</div>

but the   is still showing up...

https://pideja.ca/galleries/03-tnm/sais … 1-candide/

rod barbee · 2019-11-05 01:28:28

You’re not putting all of that in the page copy fields are you?
The <html> tag is not needed

rod barbee · 2019-11-05 01:30:16

The   is showing up because it’s inside a p tag, and the browser interprets that as text

Daniel Leu · 2019-11-05 02:17:06

I would put this in a table to have it properly aligned. You can disable the lines so they don't appear. Have a look at http://community.theturninggate.net/vie … hp?id=6724

rod barbee · 2019-11-05 03:37:58

You could also increase the width of the pallet to accommodate the long names.
A table would look nice though.

pideja · 2019-11-06 00:04:56

Trying out those tables Daniel suggested. Look into the Coriolan and Britannicus albums compared to the purely HTML approach of the Candide and Bilan albums. Both have merits but the tables approach is promising. Need to control the alignment of the table, relative to that logo in the masthead, alignment of the date and also styling, like font-family, colour... I'm guessing using CSS.

https://pideja.ca/galleries/03-tnm/saison-2018-2019/

Last edited by pideja (2019-11-06 00:09:24)

rod barbee · 2019-11-06 00:29:38

Table alignment: https://www.w3schools.com/css/css_table.asp

pideja · 2019-11-08 03:09:19

So, I guess I chickened out!
After going thru all kinds of setbacks and even though the tables approach promises more control over text formatting, I still think that the HTML approach is better looking and easier (up to now) to implement.
So, I set all credit texts, center-aligned and I'm OK with that for now.

Something I still don't understand: why is it that some styling, written in the CSS file does not apply to the credits but does if I include it in the HTML text it does apply within Backlight>Publisher>Galleries>album name>Edit Album>Page content>Pallet 01 copy ?
This, originally in the CSS file, is now in Backlight...

<style>
.widget {
    color: 
    #f7f5d2;
    font-size: 0.8em;
    line-height: .3em;
    text-align: center;
}
</style>

If everything goes well with all the other credits of all the other (and future) albums, that's what I'm going to do.

There are a lot of other design problems with this site and I cannot get bogged down.

Thank you, Daniel and Rod, for initiating me to tables.

rod barbee · 2019-11-08 03:36:47

pideja wrote:

Something I still don't understand: why is it that some styling, written in the CSS file does not apply to the credits but does if I include it in the HTML text it does apply within Backlight>Publisher>Galleries>album name>Edit Album>Page content>Pallet 01 copy ?

That's probably due to CSS Specificity: https://www.w3schools.com/css/css_specificity.asp

Matthew · 2019-11-10 07:38:59

pideja wrote:

Maybe there are particulars in the way Backlight interprets HTML?

It's just HTML, as standard. We don't interpret it.

Matthew · 2019-11-10 07:53:57

I would do it maybe like this, then use custom CSS to correct the padding, spacing and borders.

<div id="main-copy-credits">
<p>Texte de  VOLTAIRE</p>
<table>
	<tbody>

		<tr>
			<td>Mise en scène:</td>
			<td>ALICE RONFARD</td>
		</tr>		

		<tr>
			<td>Décor:</td>
			<td>DANIÈLE LÉVESQUE</td>
		</tr>		

		<tr>
			<td>Éclairages:</td>
			<td>CÉDRIC DELORME-BOUCHARD</td>
		</tr>		

		<tr>
			<td>Costumes:</td>
			<td>MARIE CHANTAL</td>
		</tr>		

		<tr>
			<td></td>
			<td>VAILLANCOURT</td>
		</tr>		

	</tbody>

</table>
<p>Du 11 septembre au 6 octobre 2018</p>
</div>

pideja · 2019-11-11 10:04:13

Thank you, Matthew. In the end, I decided to use a slightly different code and, for now, it suits me fine. However, I will try the approach you suggest in an upcoming project.

Thanks again.

Community @ The Turning Gate

#1 2019-11-04 23:58:52

HTML text formatting

#2 2019-11-05 00:51:12

Re: HTML text formatting

#3 2019-11-05 01:28:28

Re: HTML text formatting

#4 2019-11-05 01:30:16

Re: HTML text formatting

#5 2019-11-05 02:17:06

Re: HTML text formatting

#6 2019-11-05 03:37:58

Re: HTML text formatting

#7 2019-11-06 00:04:56

Re: HTML text formatting

#8 2019-11-06 00:29:38

Re: HTML text formatting

#9 2019-11-08 03:09:19

Re: HTML text formatting

#10 2019-11-08 03:36:47

Re: HTML text formatting

#11 2019-11-10 07:38:59

Re: HTML text formatting

#12 2019-11-10 07:53:57

Re: HTML text formatting

#13 2019-11-11 10:04:13

Re: HTML text formatting

Board footer