Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

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

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

HTML text formatting

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 &nbsp; 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)

Offline

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

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

Re: HTML text formatting

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 &nbsp; is still showing up...

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

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: HTML text formatting

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: HTML text formatting

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,537
Website

Re: HTML text formatting

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


Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: HTML text formatting

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

Re: HTML text formatting

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)

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: HTML text formatting


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

Re: HTML text formatting

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.

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: HTML text formatting

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,687
Website

Re: HTML text formatting

pideja wrote:

Maybe there are particulars in the way Backlight interprets HTML?

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


Matt

The Turning Gate, http://theturninggate.net

Offline

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

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,687
Website

Re: HTML text formatting

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>

Matt

The Turning Gate, http://theturninggate.net

Offline

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

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

Re: HTML text formatting

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.

Offline

Board footer

Powered by FluxBB