-
Posts
-
Hey Yigit, Gunter & Team,
So I know Enfold has some responsive controls for each element when they reach 1 of 4 breakpoints. It’s a good starting point, but it means a lot of manual work for each element, and doesn’t always achieve the desired results with so many screen sizes/resolutions etc these days. If a heading is made up of short words only (“A small cat”) then it’s often ok, but if a heading has a really long word for instance (eg: “Interdisciplinary” or “Hypothetically”) then often these will fall outside the viewport still.
I was wondering in addition to these manual settings if it would be possible in the Theme Settings to include a section (maybe an entirely new section called Typography which handles all font related items?) where it is possible to enable and alter settings for truly responsive typography on a global scale, such as is used here for example: https://utopia.fyi/type/calculator and https://utopia-text.netlify.app
If it controlled body text and H1-H6’s (and perhaps any other commonly used styles like labels) it would keep everything on a uniform scale, while ensuring truly responsive design without fear of text falling outside the viewport (perhaps an option to apply the “word-break: break-word;” css options may also assist in extreme cases of super long words).
My developer and I have been considering coding this in ourselves, but it got me thinking that this would be a nice addition to have natively in the theme if at all possible.
Thanks as always for taking the time to consider this feature request, and if you have any questions just let me know.
Have a great day.
Tim
Hey Tim,
Sorry for the late reply.
Thanks for bringing this up.
I added it to our dev repo – but cannot give an ETA yet.
If I have any questions when starting to work on it I will let you know.
Have a great day.
Best regards,
Günterby the way – i often make my own css for example for headings in this way:
font-size: min(max(24px, 4vw), 48px);read here f.e.: https://css-tricks.com/simplified-fluid-typography/
or use clamp:
font-size: clamp(100%, 1rem + 2vw, 24px);see here for browser support: https://caniuse.com/?search=clamp
Hey Gunter, great thanks for considering this. I think it would be a really helpful feature.
And thanks Guenni007 for the suggestions!
Hi,
As Günter mentioned, he has already added it to our dev repo and shared this thread as reference. We will update you here :)
Best regards,
YigitHey Gunter,
I have just started playing the the new responsive typography feature, and I wanted to say a big thank you for implementing this suggestion.
I’ve only just started with it, so sorry if I’m missing something or don’t understand something fully, but I had a few questions/suggestions on it’s implementation.
1. In the articles I linked to when I started this thread, and in the ones you link to from the Enfold theme settings, to achieve the best responsive results they usually use em or rem units for font sizes. However, I can only select pixel sizes in the Enfold settings. Is there a reason for this? As a suggestion, could we do away with the drop down list of pixel sizes, and instead use a text entry box where we can enter a value that we want, such as 1em, 2vw, 1.5rem, 10px etc? This would provide a lot more flexibility, plus also I think would be quicker than using a drop down list for all of these sections. Then it would be easy to implement the typographic scales you link to in the articles for instance by simply copying/pasting the em values if we wanted to.
2. Would it be possible to add an option in for each h1-h6 section along the lines of “override individual page settings”? For instance, on some sites before this feature was added, I’ve customised the Special Headings using the responsive settings in the ALB element. But now with these global features, I have to find each one I customised and revert it to default for this new feature to take affect on it. Another possibility to help with this could be a global option “set all heading elements responsive styles to default” which as a one-time thing when starting to work with the new responsive typography element you can select it and know that any custom headings/special headings that you’ve ever customised over time are now back to defaults, so you can start using the new responsive typography without any surprises. (I think I prefer this second option)
3. How does this feature interact with the Advanced Styling tab? For instance, if values are set in responsive typography, and values for a H1 exist in the Advanced Styling tab, does the AS tab take priority? (It seems that way, but just want to be sure).
Thanks again Gunter for your brilliant work implementing these and other features.
Regards,
Tim
Hi Tim,
Thanks for your feedback.
ad 1)
That makes sense. I took px because Kriesi did in his default setting (and also in the Advanced Styling tab).
I will change it to plain input fields with a default of px (if no other unit is specified).ad 2)
For elements that support post css files (like ‘Special Heading’ does) the responsive handling for font sizes in in aviaElementStylingResponsive::add_responsive_font_sizes(…).
What I would suggest is to extend the parameter list with a reference to the shortcode object and add a filter to supress generating the media queries.
That will allow more flexibility without touching any other core code.ad 3)
Yes, Advanced Styling has priority. Selectors are e.g.
#top #wrap_all .all_colors h1Selectors from typography tab are simple e.g.:
h1Best regards,
GünterHey Gunter,
Thanks for the responses, and for changing the input fields to allow variants other than pixels, that will be great.
I’ll wait to work on this for my clients until that functionality is added.
Have a great week
Tim.
Hi,
For next release 4.8.8.1 I added this feature:
add_theme_support( 'avia_options_extended_typography' );replaces the selectboxes with plain input fields where you can add any valid CSS (there is no check).
To skip your ALB settings for responsive fonts there is a filter:
If you want to have a beta version for testing let us know.
Best regards,
GünterHallo Günter! Ich antworte hier mal auf diesen thread, weil ich neu im Forum bin und nicht mehr weiß, wie ich einen neuen thread erstellen kann. (Wo kann man das??) In WordPress / .css / html. bin ich ein totaler Neuling.
Ich bin Grafik Designerin und erstelle gerade eine Website anhand dessen ich mir WordPress beibringe. Extrem wichtig ist mir Typografie. Ich habe bei “erweitertes Styling” den H1 etc. Formaten verschiedene Schriftattribute zugeordnet.
Nun habe ich das Problem, dass auf kleineren Devices die große Schrift (H1 = 50px, H2 = 40px) noch zu groß ist und die Spalten nicht kleiner werden). (link siehe Private Content)
Ich möchte gerne, dass es sich “fluid” der jeweiligen Screengöße anpasst. Gibt es da ein .css für?
Viele Grüße
JosephinePS Nun habe ich gerade gedacht, ich hätte eine Lösung gefunden, hat aber leider nicht funktioniert.
unter
> Enfold child > theme optionen > Allgemeines Styling > Typography
Ich habe in den theme editor folgendes eingetragen: add_theme_support( “avia_options_extended_typography” ); und ins .php das aus dem link hier: https://github.com/KriesiMedia/enfold-library/blob/master/actions%20and%20filters/Layout/avf_el_styling_responsive_font_size_skip.php
Dann habe ich beim H1 selector folgendes eingetragen:
Font size: Standard 50 Medium 35 Klein 20 Very small 300
Leider hat sich nichts getan, als ich das Fenster verkleinert habe bzw. es am Handy angeschaut habe. Es geht ja auch eigentlich nicht nur um die Schriftgröße, sondern auch um die Spaltenbreite, glaube ich…Hi Josephine,
Thanks for contacting us!
You can start new threads under Enfold sub forum – https://kriesi.at/support/forum/enfold#new-post. Could you please start a new thread and attach temporary WordPress admin logins in private content field so we can look into it? :)
Best regards,
YigitHi Yigit,
meanwhile one of your colleagues told me where to start new threads and as I did not have an answer to my reply on this thread I copied the text and begin a new tread. I will add the temporary WP login to my post from this morning.
best regards
JosephineHey Gunter,
Got a problem with the responsive typography not working.
If i disable Enfolds CSS combine/minify, it works fine. When I enable it, it’s like the media queries aren’t being executed. Actually, it’s not just responsive typography but other media queries as well that aren’t getting executed when combine/minify is enabled.
I am only noticing this on a site where responsive typography is enabled, and not on others (although I haven’t tested this extensively).
I thought initially it was Litespeed cache causing the issue, but I have disabled all CSS minification and combining in litespeed and tested multiple times, and it seems to be related to the Enfold compression setting.
Interestingly, if I let Litespeed combine and minify (with it all turned off in Enfold) then it appears to be working fine. So again, seems to point to something with Enfold’s combine/minify.
I hope that makes sense.
Regards
Tim
Hi Tim,
I checked it with “Content Font” and “H1” in a post content.
It works fine for me also in merged css.
Can it be you are using some custom css or some responsive styling in the element ?
Can we have a link to a page where we can see it ?
Best regards,
GünterHey Gunter,
Thanks for taking a look and sorry to waste your time, I should have mentioned that the live site has been fixed (by turning off Enfold’s merging).
I will try and see if I can replicate it on a dev site for you soon, will let you know.
Thanks
Tim
- The topic ‘Responsive Typography (Feature Request)’ is closed to new replies.