Does the height of the rendered font adjust based on the length of words in Japanese formatting?

I can't figure out why this strange issue is occurring...

It seems that the font "size" (or rather, the height it occupies) changes depending on the length of a word. I tried to reproduce this in English without success, but it consistently happens with Japanese text. Any thoughts on what might be causing this?

I've reviewed my code and don't see anything relevant that could be causing this behavior.

The CSS for the header itself is pretty standard (originally used em instead of px with the same outcome):

.center-box-header {
    text-align: center;
    font-size: 50px;
}

Any insights into why this peculiar issue is happening? Could it be related to how Japanese fonts are designed?

htmlcssfont-size

Answer №1

Oh my goodness, I just realized after posting this that the answer is quite obvious haha...

The key factor here is not actually the length of the words, but rather the presence of kana characters. In the wordlist I am using, the longer words tend to have kana attached to them, which led me to believe that the increased height was due to the word length.

To address this issue in the most effective way, one could adjust the line-height or choose a different font altogether. Personally, I have opted to adjust the line-height.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing CSS position sticky in Bootstrap 4 to maintain visibility of a sidebar

I currently have a layout with two columns structured like this: <div class="row"> <div class="col-xs-8 content"> </div> <div class="col-xs-4"> </div> </div> By applying the position:sticky to the si ...

csstwitter-bootstrapcss-positionbootstrap-4twitter-bootstrap-4

What is the best way to eliminate the space following the image?

Something strange happened, and now there's a big gap following the top image. I was working on making the code responsive and then inserted this image, which messed everything up. Any ideas on what I might be doing wrong? I want the image to be close ...

htmlcss

Change the color of the first element when hovering over any of its siblings using only CSS

I am looking for a solution using only CSS We have 3 circles here. When I hover over circles with the class name "Mycircle", the circle with the class name "BigCircle" should change to red color HTML <div class="BigCircle"></div> <div cl ...

htmlcss

Can anyone help me troubleshoot this issue with uploading external JS scripts into my HTML code?

I'm currently facing an issue with my HTML document where the external js file is not loading. Here's a snippet of the HTML: <!DOCTYPE html> <html> <head> <title>...</title> <meta name="viewport" conten ...

javascripthtml

CSS Table columns are set to have a fixed width for the first and last columns, while the middle two columns have dynamic widths

I was able to create a table layout like this: fixed - dynamic(50%) - dynamic(50%) - fixed http://jsfiddle.net/ihtus/ksucU/ Now, I'm wondering how to achieve this layout instead: fixed - dynamic(30%) - dynamic(70%) - fixed This is the CSS code I c ...

htmlcss

Strategies for successfully passing and showcasing the result of a calculation on a fresh view or component within Angular

I have developed a basic calculator application with two main components: Calculator and Result. The Angular router is used to navigate between these components. Now, I am looking for a way to dynamically display the calculation result from the Calculator ...

htmlcssangulartypescriptangular-template

What is the best way to present progress bar numbers in Bootstrap beneath the bar?

I have successfully implemented a progress bar using Bootstrap. Now, I am looking to display numerical values below the progress bar, similar to this: https://i.sstatic.net/3QG8d.png Is there a way to achieve this without utilizing JavaScript graphing l ...

javascripthtmlcsstwitter-bootstrap

Retrieve information from a JSON document

My project involves a bookStore with a list of books that I am working on. I am trying to extract all the book data from a JSON file and display them in a card view on a webpage. Although my code is error-free and seems to be functioning properly, the da ...

javascripthtml

Numeric Input Box: Show gaps

I have numeric input boxes in my HTML/PHP/JS application where users will be entering numbers with 4 to 7 digits. However, I want the users to see spaces between every third digit for better readability. For instance, User types: 8000 Us ...

phpjavascripthtmltextbox

Create a CSV document using information from a JSON dataset

My main goal is to create a CSV file from the JSON object retrieved through an Ajax request, The JSON data I receive represents all the entries from a form : https://i.sstatic.net/4fwh2.png I already have a working solution for extracting one field valu ...

javascriptjqueryhtmlajaxcsv

FadeOut/FadeIn Iframe Animation

Help needed with making an iframe fade in and out using jQuery. Something seems off with the code and I can't figure out why it's not working. Can anyone spot the mistake? HTML <body> <center> <div class="headbackground" ...

javascriptjqueryhtmliframefade

Maintaining an even distribution of flex children on each line as they wrap to the next line

I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique. For example, let's say I have a flexbox with 6 elements. When it wraps, I would like t ...

htmlcssflexbox

Why is the image popup feature not functioning properly? What could be causing the issue?

I'm experiencing issues with the functionality of my HTML file and image popup. I've attempted to troubleshoot it multiple times without success. Here is a code snippet for reference: You can view and run the code on CodePen: Open <html> ...

javascriptphphtmlcss

Troubleshooting: Replacing onClick() in HTML with JavaScript when addEventListener is not functioning as expected

I've tested several solutions already, but unfortunately, none of them seem to work for me. My Flask application utilizes a combination of HTML and JavaScript to present a few web pages. At the moment, I still have some inline code (which is also pr ...

javascripthtmlevent-listener

I need help figuring out how to showcase the following object in an Angular 5 HTML file

https://i.sstatic.net/XXm3W.png The console screenshot above shows an object with two values: users and tickers, each being an array of values. How can I display these values in an Angular 5 HTML template similar to the screenshot above? I attempted to ...

javascripthtmlnode.jsangularangular5

What steps should I follow to make a section stay in place on swipepages?

Looking for help to create a sticky section similar to the one on (mobile version). I want to replicate this section with 2 buttons on swipepages.com but I'm not sure about the custom CSS and HTML needed to achieve this. Any assistance would be appre ...

htmlcssstickysticky-footer

Customize Typography style variations in Material-UI version 5

I have encountered a similar issue, but with a twist from Can't override root styles of Typography from Materil-UI Back in v4, I had a theme set up like this: import { createTheme } from '@material-ui/core/styles'; export const theme = cre ...

cssmaterial-ui

Ensure that everything within the Container is not see-through

Fiddle:https://jsfiddle.net/jzhang172/b09pbs4v/ I am attempting to create a unique scrolling effect where any content within the bordered container becomes fully opaque (opacity: 1) as the user scrolls. It would be great if there could also be a smooth tr ...

javascriptjqueryhtmlcss

Utilize Flexbox and Material UI to position Item at the bottom of the layout

I'm attempting to include Unassigned Text at the bottom of my Container, following the layout shown in this mockup:https://i.sstatic.net/863cl.png Here is the code I currently have. I'm facing difficulty in getting the border between the play bu ...

cssreactjsflexboxmaterial-ui

Step by step guide on inserting View and Delete buttons in an HTML table populated by JSON data

I've successfully loaded data from a JavaScript file in JSON format into a plain HTML table using JavaScript. Everything is working well so far. I now want to enhance the table by adding two buttons, View and Delete, that when clicked will redirect to ...

javascripthtml