Japanese Font Orientation Incorrect

6 replies·opened Mar 17, 2021
P
powered_by_coffeeMar 17, 2021

Hello Support,

My slider headings are displaying vertically instead of horizontally when I switch the text to Japanese. When I use English they all display correctly (horizontal). As per the attached example, you can see the two English Terms ("Hello","Growth") look correct, while the Japanese headings do not.

Ive tested and imported a Japanese font from the google api to see if using a Japanese font would fix the issue. But it did not.

Below is a code snippet of the incorrect layer.

							<!-- LAYER NR. 11 -->
							<div class="tp-caption   tp-resizeme"
								 id="slide-9-layer-14"
								 data-x="['left','left','left','left']" data-hoffset="['0','0','0','0']"
								 data-y="['top','top','top','top']" data-voffset="['0','0','0','0']"
											data-width="48"
								data-height="none"
								data-whitespace="normal"

								data-type="text"
								data-responsive_offset="on"

								data-frames='[{"delay":"+0","speed":500,"frame":"0","from":"x:50px;opacity:0;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
								data-margintop="[0,0,0,0]"
								data-marginright="[0,0,0,0]"
								data-marginbottom="[0,0,0,0]"
								data-marginleft="[0,0,0,0]"
								data-textAlign="['center','center','center','center']"
								data-paddingtop="[0,0,0,0]"
								data-paddingright="[0,0,0,0]"
								data-paddingbottom="[0,0,0,0]"
								data-paddingleft="[0,0,0,0]"

								style="z-index: 15; min-width: 48px; max-width: 48px; white-space: normal; font-size: 40px; line-height: 40px; font-weight: 700; color: rgba(255, 255, 255, 1.00);font-family:Poppins;">繋がり</div>

And tested using "font-family:Noto Sans JP;"

Thanks for your help correcting this issue!

P
powered_by_coffeeMar 17, 2021

Not seeing attached image. So resending

S
SemiColonWebSTAFFMar 17, 2021

Hello,

Apologies for the Inconveniences caused!

Please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

P
powered_by_coffeeMar 21, 2021

Hello Support,

Sorry for the delayed response. The Japanese version of the site was not live, so I initially was unable to provide an url. But I have uploaded it.

If you go to http://popitteam.com/index_jp.html and scroll down you will see the issue.

Thank you

S
SemiColonWebSTAFFMar 21, 2021

Hello,

Thanks for the Live URL.

Simply remove the white-space: nowrap; CSS Property from your Layers.

This should automatically fix the issues. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

P
powered_by_coffeeMar 26, 2021

Removed "white-space: nowrap;" from the layers but the issue persists where English text will display horizontal correctly, but Japanese text displays vertically.

You can see the updated code live at http://popitteam.com/index_jp.html and via the attached screenshot.

Please advise on how to fix this issue.

S
SemiColonWebSTAFFMar 27, 2021

Hello,

Thanks for your Patience!

Please remove the data-width="48" Attribute and max-width: 48px; from these Text Layers as this might be causing this issue.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard