Stacks 3 Text Alignment Problem


(Bruce Kieffer) #1

This appeared after upgrading to Stacks 3. I’m not sure what the problem is. I have a text stack set to custom line height of 105%. That causes the stack to no longer align text center.

When I change the line height to “normal,” then the text aligns centered as set.


(Isaiah Carew) #2

There appears to be some more stuff involved there as the inner text box is much smaller than your outer one. I’m not sure how to achieve that.

If you’d like you can send a small example file with this one stack in there and I’ll be able to fix the bug straight away. Looks like an easy one to squash.

If you sign on to the slack group slack.yourhead.com you can send large files just by dragging a zip file into a private message. But whatever way works best for you – a Dropbox share to our customer support email is also a good way.

Thanks for the bug report,
Isaiah


(Rob D) #3

@bruce – Have you tried to change %-height to em-height? For some reason, sometimes that makes a difference…


(Bruce Kieffer) #4

% is the only option available for this setting.


(Bruce Kieffer) #5

Finder icon preview appears to be broken too.


(Bruce Kieffer) #6

I sent the file to Christi.


(Isaiah Carew) #7

Finder icon preview appears to be broken too.

Answer here: Stacks 3 Public Beta


(Bruce Kieffer) #8

Thanks for the clarification.


(Bruce Kieffer) #9

Am I the only one having trouble with line height adjustments? Please test this on your projects. RW 6.3.3. and Stacks 3.0.1. I can’t get text to align centered with anything but 100% (normal) line height. When I change the line height on centered text, then the text shifts to left aligned and can’t be aligned centered or right. I tested with a new blank project, no luck. I tested by hand coding the style, no luck. I’m kind of shut down with my site development since I can’t change line heights.


(Aaron Marquez) #10

Hey Bruce,
Your code is not closed properly or correctly formatted. Both would be reasons for the code not applying.

Here is what the code should look like (I’ve added code for center aligning the text):
<p style="line-height:1.5em; text-align:center;">Super Fast and Ridiculously Inexpensive</p>

I’ve closed your code after the last " to add >. The </p> would go after the text, if you are wanting to style it.

Once you’ve fixed the code, I’d suggest highlighting the code and removing formatting [Format > Ignore/Clear Formatting].

Let me know if that works!


(Pedro Perdomo M.) #11

Hi Aaron,
I reproduced the same error that Bruce, no code by hand, using only text settings. By selecting “Custom” any value other than 100% in Line Height gives the error.

¿Stack bug?

Best


(Isaiah Carew) #12

Earlier today I was finally able to duplicate this bug (after weeks of partial bug reports and sketchy descriptions of the problem). There is a key ingredient that I didn’t know until I stumbled on it today: there must be less than one line of text.

I’ve filed this bug to the Stacks buglist: https://github.com/yourhead/s3/issues/486
If you’d like to follow along and see when it gets fixed you can watch there for updates or add details if you want.

BTW: if you post bugs directly to the buglist I will love you forever. :heart_eyes:

Isaiah


(Pedro Perdomo M.) #13

Yes Isaiah,
I also found that is a “one line of text” issue, although is centered in iPhone preview mode.

Best


(Isaiah Carew) #14

I think this one kind of slipped through the cracks because setting the space between lines is normally something people only do when there is more than one line for there to be space between. :wink:

That said, it’s definitely a bug and probably won’t be tough to fix.

Isaiah


(Bruce Kieffer) #15

There may be more going on here. The only reason I increased the line spacing was because the text lines of 200% sized fonts squish together when viewed on a screen narrower than one line of text. That does not happen when the font size is set 150% or less with line spacing 100%, as shown here in the “Site is under construction…” text. If I change that text to 200% font size, then it squishes together too.


(Isaiah Carew) #16

@bruce neither Stacks nor RapidWeaver have any responsive behavior (change that take place when you switch to mobile) that affect text size or compactness. However many themes do. Since I don’t see the behavior that you’ve mentioned it seems likely that it’s coming from theme you’re using.

But this theory is easily testable. If you switch to a mobile friendly built-in theme – like “Reason” is a good one – do you see the overlapping text?

If yes, then it is definitely a Stacks bug. If no then it may be a theme bug.

Isaiah


(Bruce Kieffer) #17

It may be theme related, but not just one theme, and I want to reiterate that this was not a problem prior to RW 6.3.3 and Stacks 3. Look at theses:

Reason Theme

Storm 3.0 Demo Theme

Split Theme


(Isaiah Carew) #18

Is there a built-in theme that I can look at that behaves this way? To be able to fix it I just need to be able to make it happen myself (not just in a screenshot – but actually live in RW).

I will test in Stacks 2 and Stacks 3 – we did not intend to make any changes to the text system at all – if there are any there are bugs and I will fix them immediately.


(Bruce Kieffer) #19

I looked at every built-in theme, and all display the text line spacing differently. Here’s a test I did.
Start a new project.
Use the built-in Veerle (default) theme.
Add a Stacks page.
Add a text stack.
Align the text centered.
Change the text to “Super Fast and Ridiculously Inexpensive.” or some other text. Changing the text is critical.
Set the font size to 200%.
Set the line spacing to Custom 105%.
The text shifts to left aligned in Edit mode.
Preview as iPhone.
Toggle through the other built-in themes.
Some themes center align the text, others left align the text. Without anything else on the page the line spacing seems to work.


(Isaiah Carew) #20

Yep. That’s the bug that we got yesterday. It’s on github and I’m already working on it (mostly done, really) https://github.com/yourhead/s3/issues/486

But…

This morning you mentioned “fonts squish together” and said, “I want to reiterate that this was not a problem prior to RW 6.3.3 and Stacks 3”

The steps you just outlined (which are amazing detailed – thank you so much!!!) – don’t really seem to produce any “squish” sort of behavior.

So… I’ve got the first bug. It’s in the bag. The squish thing… not so much.

Isaiah