Japanese Font Orientation Incorrect

6 replies · opened Mar 17, 2021

Ppowered_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!

Ppowered_by_coffeeMar 17, 2021

Not seeing attached image. So resending

SSemicolon WebSTAFFMar 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.

Ppowered_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

SSemicolon WebSTAFFMar 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.

Ppowered_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.

SSemicolon WebSTAFFMar 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