Jump to content

Archived

This topic is now archived and is closed to further replies.

caspersjan

Can I set uniform font size for BigText globally?

Recommended Posts

caspersjan

Hello,

I have purchased BigText DMS some time ago and would like to use it for Section headings (so they stay on the same line when the screen size is reduced). Thus on every page I have the section deployed three or four times, always with a single line only. The width (i.e. character count) of each line differs, of course. Is it possible to set a global font size? At the moment I have to guess which width results in the correct font size and insert empty space before and after the text accordingly. This is imprecise and inconvenient, but I have not been able to find another way. Would there be one? Could I address all BigText sections in CSS and control the font size with a percentage? Of course the font size changes with screen size. What I am trying to achieve is that all instances of BigText change uniformly, from the same size to the same size. Would that be possible? Or am I looking for something the section was not built for?
I appreciate your advice and instruction on this matter. Yours faithfully, Jan Caspers.

Share this post


Link to post
Share on other sites
TourKick (Clifford P)

Hi. Thanks for your purchase.

 

If I understand your use case correctly, you're wanting text to be responsive.

 

Have you tried this one? http://www.pagelines.com/shop/components/responsive-typography/

 

I don't know that that's exactly what you want either, but it might be.

 

My BigTextDMS section does not have any way to display the post title or other "dynamic" text, if that was another one of your questions.

 

Let me know if you have any other questions. Until I hear back, I'll mark this as solved.

 

Thanks again!

Share this post


Link to post
Share on other sites
caspersjan

Dear Clifford,

I probably have not explained it too well:

Several times on each page I want to place a line of text.

I am writing this text myself, it is not a post title or any sort of "dynamic" text (my pages are in four segments each and these lines are to be headers for each segment, that's why I described them as "section titles"). 

BigText does a great job at maintaining the lines of text when the screen is resized, i.e. on a computer, laptop or smartphone screen. By this I mean that one line will remain one line, come what may - just the size of the font changes

But each of my lines has text with a different number of characters. When the text is "BENEFITS OF PRACTICAL ANIMATION" BigText shows it in a smaller font than "WORKSHOP IMPRESSIONS", on the same page. This size difference is of course maintained as the screen size changes and BigTextDMS does its magic to keep the lines.

I can get them all to be displayed in the same size by inserting more or less empty spaces before and after (you give me that option within BigTextDMS itself: "How many spaces to indent BEFORE this line? (Default: zero)"). Thus if I add a certain number of spaces before and after "WORKSHOPS IMPRESSIONS", the font is the same as the longer "BENEFITS OF PRACTICAL ANIMATION" (sort of - I am sure it's not precise though it looks alright). 

Does any of this make sense? Can you understand my problem better?

 

What I am wondering is if adding spaces before and after really is the only way I can achieve such consistency in font size. I thought I could do it by forcing a line height ("BigText Line-Height (e.g. 0.9). Default = 1" in the Container Settings), but I failed (though this may well be because I did not do it right.) Please let me know if you think there is another way.

 

Responsive Typography looks interesting but from the Demo I am not sure if it would preserve a line of text as one line of text and not push a part on a second line when resized. 

 

Thank you for your patience and your care for my query. Yours faithfully, Jan.

 

 

Share this post


Link to post
Share on other sites
TourKick (Clifford P)

If I'm understanding you correctly, you like to use BigTextDMS to keep your entered text on a single line regardless of the device's viewport width.

 

And, as an example, you want all 4 of the BigTextDMS sections in use on a single page to result in the same width regardless of the number of characters entered in BigTextDMS.

 

If that's all correct, then I think what you're really asking is to set a maximum font size. In other words, on a full-width browser, you want all BigTextDMS sections to have a font-size of say 32px. On smaller viewports, it's ok for it to do its magic and resize as needed.

To which I say, "I don't think so..." That's why I added the options for extra spaces/characters.

 

If you want to look into the actual JS script that this section utilizes, check out http://www.zachleat.com/bigtext/demo/and https://github.com/zachleat/BigText

 

If you still think I'm not understanding your issue, it might be helpful for you to provide a link to your page and/or to record a screencast (like with http://www.techsmith.com/jing.html).

Share this post


Link to post
Share on other sites
caspersjan

Dear Clifford,

thank you for your reply. The JS script is beyond me - which is why I am always grateful to people like you who make easy-to-use yet powerful plugins! 

I want all BigText sections on a page with the same height regardless of character number (not width - they have that already of course). And I am really asking if I can set a uniform font size (not maximum - being all the same on any given viewport there would be nothing less than the set font size).

If you say "I don't think so..." to this I really hope I did not offend your concept for this section! It would not have been my intention to do so. I appreciate what BigText does now and I am happy to use the option for extra spaces which results in the same thing. In fact I fondly remember counting character spaces on typewritten copy in order to add blank spaces where needed so the retyped page would result in justified text. It was a gentle age...

You can see a page here that uses BigText in the way I intended: http://animatinglibraries.com/. Three headings, "BRINGING BOOKS TO LIFE AND LIFE TO BOOKS", "BENEFITS OF PRACTICAL ANIMATION" and "WORKSHOP IMPRESSIONS" are all (more or less) the same font size, thanks to inserted spaces. So it is working as it is. I was really just asking if I had overlooked something and there was a function to set the uniform font size I have thus created with the Section's available settings.

Yours faithfully, Jan.

Share this post


Link to post
Share on other sites
TourKick (Clifford P)

Thanks for the thorough reply and kind words.

 

"BRINGING BOOKS TO LIFE AND LIFE TO BOOKS" text has font-size: 3.15em

"BENEFITS OF PRACTICAL ANIMATION" has a font-size of 4.02em

"WORKSHOP IMPRESSIONS" is 4.4em

 

So, if I'm not mistaken, you do NOT currently have those extra spaces added to make them the same size...

 

Yes, if you add extra spaces before/after on each line, you can make them the same font size, but that's not what BigText is for. It makes text responsive to fill the width of its container whether its on a wide desktop like I'm using now or a narrower viewport (e.g. "WORKSHOP IMPRESSIONS" changes to font-size of 2.37em when on a 410px wide viewport).

 

Really, what you're wanting is to set a single font size for all the headers, but you then want that font size to be responsive to narrower screens. That's not what BigText is designed to do.

 

Here are some options:

1) Play with the Width and Max-Width of BigText area options (last 2 items in this screenshot), either by themselves or in conjunction with using the additional spacing method you've tried before.

 

2) Use something other than BigTextDMS (like TextBox section) to insert text headers. Then control the font size with custom CSS that uses media queries. More info at http://www.w3schools.com/cssref/css3_pr_mediaquery.aspor a google search. I'd recommend this method if you absolutely want it the way you described.

 

P.S. I see you have Flyp and some other sections of mine on that page too. It's always great to see my stuff "in the wild".

 

I noticed the Flyp scroll bars appear when they probably don't have to. Try adding this CSS:

#flypuusmniv .flyp_front { overflow: visible; }

Share this post


Link to post
Share on other sites
caspersjan

Dear Clifford,

I am lost for words! I really appreciate your candid and concise counsel - it may well result in my abandoning of BigTextDMS, but it would still have been worth every penny (or rather cent) I spent on it! Thank you for your generosity in advising and explaining - even beyond the scope of my question! I like Flyp very much. I don't even know which other of the section I use you have authored. But it is coders like you who enable strangers-to-code like me to realise our visions! I will educate myself about media queries, I'm sure it will open up many more possibilities! And I'll add the CSS to clean up Flyp's appearance. Thanks again! I always mean to add a section of credits to my pages, thanking the likes of you. With this renewed experience of kind assistance I really must do so!

Yours faithfully, Jan. 

Share this post


Link to post
Share on other sites

  • Similar Content

    • vogelwild
      By vogelwild
      Hi Cliff,
      I've just purchased your BigText Plugin and I like it! In your description you write:
      ONLY use single quotes, not double-quotes. Good: BigTextDMS is <span style=‘color:red;‘>really</span> big. Bad: BigTextDMS is <span style=“color:red;“>really</span> big.  
      I've tried this, but it doesn't work. BUT double-quotes work fine for me. It there something wrong with double-quotes (some hidden mistakes, if I use them)?
       
      Thank you
      Petra
    • photomom86
      By photomom86+
      I just purchased the DMS framework and the Sophistique child theme. I am needing help with setting the content or body font size... the content in a blog post only.
       
      I have the global font size set to 18px and then I have this custom code in the custom css area
       
      body{ font-size:22px !important;}
       
      but this code also changes the font size of the Sophistique contact bar... which I do not want. Anyone know the code to only change the font size in the blog post content area only?
       
      Or vice versa, I could set the global font to 22px and then use custom code for the contact bar font in custom css.
       
      I've tried to use the chrome developer tools to figure this out to no avail. Thanks!
       
      url is stagegecg.com
       
    • Bleuy
      By Bleuy+
      Morning.
       
      I've purchased your Out of the MediaBox plugin which is great, however is there an easy way of setting the font size in the headings without going through masses of customization?  Would be great as a drop down in a future revisions...... but for now, how do I do this?
       
      Thanks very muchy in advance.
       
       
    • Rob Thomas
      By Rob Thomas+
      I just purchased this section and after downloading it, as BigText DMS 1.1, from my Pagelines account, it immediately says that there is an update for the plugin. I update the plugin and it says the plugin has been successfully updated. It then continues to prompt me to update the plugin. Forever. No matter how many times I update the plugin or log out and log back in. It also seems to be slowing down my site. This is a WP multisite hosted on Flywheel. 
    • WebEditor
      By WebEditor
      Hallo, I put a Main Navi Menu in the Header Section, but I don't understand how to change the font size of it. Could you help me?
       
      Thank you very much
       
      Enrico
×