[Support request] Bilingual site, split title on two lines

[Riccardo]

Hello there. I am running a language learning site, I would like H1 titles to look something like that

THANK YOU VERY MUCH

ありがとうございました

but now I get something like

THANK YOU VERY MUCH ありがとうございました

and often times the length of the two titles makes the Japanese translation break and end up on the second line

THANK YOU VERY MUCH ありがとうござ
いました

I am using the same font. I would like to just press enter or shift enter, generate a new line to fill the Japanese title and save.

Is this achievable with a simple setting / CSS?

Thank you very much.

[David]

Hi there,

the Site title field won’t handle the HTML you require to add the line-break.
So you would need some PHP to add your two liens and the necessary HTML.

Try this:

add_filter( 'generate_site_title_output', function( $output ) {
    $titleHTML = '<span class="line one">THANK YOU VERY MUCH</span><span class="line two">ありがとうございました</span>';
    return sprintf(
        '<%1$s class="main-title" itemprop="headline">
	<a href="%2$s">%3$s</a>
	</%1$s>',
	( is_front_page() && is_home() ) ? 'h1' : 'p',
	esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
	$titleHTML
    );
});

This doc explains adding PHP to your site: https://docs.generatepress.com/article/adding-php/

Then you can use some CSS to stack them:

.main-title .line {
    display: block;
}

[Author]

Posts