Last active
January 26, 2022 15:25
-
-
Save eclarrrk/39e2576ba989a483a9236815f4ad4d28 to your computer and use it in GitHub Desktop.
Set headline font size based on the length of a headline
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* This is the default headline size. */ | |
.headline, | |
.headline--normal { | |
font-size: 2em; | |
} | |
/* When the headline is shorter, make the font-size larger */ | |
.headline--short { | |
font-size: 2.5em; | |
} | |
/* When the headline is longer, make the font-size smaller */ | |
.headline--long { | |
font-size: 1.66em; | |
} | |
.headline--longer { | |
font-size: 1.33em; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Store the page title in a variable | |
$headline = get_the_title(); | |
$hLength = strlen($headline); | |
// Set a class name for each range of character length | |
if ( $hLength <= 25 ) : | |
$headline_class = 'headline--short'; | |
elseif ( $hLength > 25 && $hLength < 40) : | |
$headline_class = 'headline--normal'; | |
elseif ( $hLength >= 40 && $hLength < 65 ) : | |
$headline_class = 'headline--long'; | |
elseif ( $hLength >= 65) : | |
$headline_class = 'headline--longer'; | |
endif; | |
?> | |
<h1 class="headline <?php echo $headline_class; ?>"> | |
<?php echo $headline; ?> | |
</h1> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment