Adjust the look of text by changing the font style and size for various languages without relying on the html lang tag

I have posts that contain both English and Korean text within the same lines, for example:

This is an example (예시).

I frequently switch between the two languages.

Now, I want to use different fonts and font sizes for each language.

My usual way of accomplishing this is by using specific CSS blocks with lang(en) and lang(ko) tags in my HTML content like:

<p lang="en">This is an example (<span lang="ko">예시</span>)</p>

However, since I plan on writing my posts in Markdown and mixing the two languages frequently, I would like to minimize the need for such detailed HTML specifications.

I am aware that in CSS, if a font specified does not support a particular language, it automatically moves to the next one in priority. With this in mind, I wonder if there is a way to leverage this feature to change font sizes based on the language?

If you know of any other methods to achieve this, please share!

(I'm also curious if it's possible to use JavaScript to detect the font being used and adjust the font size accordingly only for the "Some Korean Font"?)

javascriptjqueryhtmlcssfonts

Answer №1

In my opinion, trying to find a JavaScript method to detect the language may not be worth the added complexity it brings and could result in unnecessary overhead on your website. It would be better to address this issue proactively.

Instead of relying on such methods, why not compose your content using a text editor first?

For example, type out your text like this (@@@example@@@).

You can then easily replace @@@ with <span lang="en"> and @@@ with </span>, allowing you to work with Markdown efficiently.

Depending on the nature of your content, you might even discover a quicker character combination to signify specific languages, such as:

This is an illustration (%%example%).

Choose a unique and convenient character sequence for your needs.

Whether you choose manual search and replace for less frequent posts or automate the process through scripts for more regular updates, finding a workaround that suits your workflow will save time and effort in the long run. You could even set up a task to trigger the script whenever files in a designated directory are modified.

Answer №2

One of the new features introduced in HTML5 is the addition of a special attribute called

data

<tagHTML id="myid" data-var_name="value" data-lang="en" ...>

This means that you can include multiple instances of data-lang="en" in your code, resulting in the creation of a dataset. This dataset acts as an array that allows you to easily access and manipulate the data like this:

var article = document.getElementById('myid');

article.dataset.var_name// "value"
article.dataset.lang // "en"
..

Answer №3

If you have specific criteria to meet, my suggestion would be to incorporate the Korean text and include your font-family font-size spans using a pre-processor technique invoked within $

such as,

$(function() {
  applyKoreanSpans();
});

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

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2

I am encountering an issue where I consistently receive a keyCode of 229 in Android Chrome browsers when running either: <input type="text" (keydown)="testKeyCodes($event)"/> <!-- or --> <input type="text" (keyup)="testKeyCodes($event)"/& ...

javascriptandroidhtmlangularevents

Is it possible to use a component created in the newest version of Angular in apps developed with older versions of Angular?

I am interested in developing a component using the most recent version of Angular. However, my intention is to use this component in two distinct Angular applications - one created with Angular 6 and another with Angular 10. Is it feasible to achieve this ...

javascriptangular

Flexbox transforms Safari's Horizontal Nav into a Vertical layout

Issue with Horizontal Navigation Bar Turning Vertical in Safari I've been using flexbox to adjust the spacing and size of the li elements as the browser window size changes. Everything works perfectly fine in Chrome and Firefox, but for some reason, i ...

htmlcsssafariflexbox

swap out an element in an array with an extra element

My array contains elements with both id and des properties. I would like to add an additional property like value:0 to each object in the array. I achieved this using a loop. let data = [ { "id": 1001, "des": "aaa" }, { ...

javascriptarraysangulartypescriptecmascript-6

Styling of jQuery ComboBox is being lost after a postback

Following up on a previous question about converting a DropDownList into a ComboBox using jQuery: I have a Drop Down List on my page that I am converting into a jQuery combobox after the page loads. I've updated the JavaScript to trigger a post back ...

jqueryasp.netjquery-uicombobox

Validate email addresses remotely using an email verification service with jQuery

Is there a way to validate an email using an email verification service? The issue I'm facing is that I don't have control over the PHP service. The service only responds with "valid" and "invalid." From what I understand, jQuery validate requi ...

jqueryvalidationemail

Discover the invisible element using Selenium WebDriver in JavaScript by clicking on it

<tr id="mytr"> <td id="Table" onmouseover="this.className='menulevel1hl';" onmouseout="this.className='menulevel1norm'" class="menulevel1norm" onclick="PopupWin('Left',divMenu2011,this,'.menuitempopuprownormal ...

javascriptseleniumselenium-webdriver

What is the best method for retrieving all input fields within a form that are of the types text, password, file, textarea, and selectbox?

Is there a way to retrieve all input fields of specific types within a form using jQuery? jQuery("#signup-form").find('input').each(function(index, element) { }); I am aware that I can target text boxes with: jQuery("#signup-form").find(&apos ...

javascriptjquery

An HTML/CSS component that dynamically adjusts its height at random intervals

My goal is to have the footer of my page occupy just one line in height. On occasion, when I open my page in a new browser tab, the footer ends up being two lines tall. However, if I simply reload the page within the same tab, everything appears as intende ...

csstwitter-bootstrap

Why isn't the callback function for setTimout() working as intended?

Can someone explain why setimout(fun(),time) isn't working in this specific scenario? Explanation: This code displays a message and then hides it. I want to add a delay of 2 seconds before hiding the message, but when I try to do so using setTimeout, ...

javascriptjquerysettimeout

Encountering a dilemma during the docker build process with npm install is frustrating, especially when faced with an error message like: "Invalid response body when attempting

Encountering a docker build issue with npm install that seems to only occur inside the docker environment. The process works perfectly on my operating system Error Step 6/8 : RUN npm cache clear --force && npm install --legacy-peer-deps ---> ...

javascriptnode.jsdockernpm

How can I retrieve button clicks with JQuery DataTables mRender?

I am currently using the following ajax call: $('#stlmtddel').click(function(event) { var customerid = "<%=customerid%>"; var appointofcaid = "<%=appointofcaid%>"; var kindcontrolid = "<%=kindcontrolid% ...

javascriptjqueryajax

Discovering the absent number within a cyclical array

Looking to find the missing number between two arrays in a cyclical manner using either Javascript or jQuery. It's easy to find all missing numbers, but I specifically need to identify the single missing number within the range of the second array whi ...

javascriptjqueryarrays

Manipulating elements repeatedly using jQuery

One of the issues I encountered while working with jQuery was appending a YouTube video when a button is clicked. To do this, I used the following code: onclick="$('#videogallery').append('<iframe width=725 height=398 src=http://www.yout ...

javascriptjqueryhtml

Exploring the Integration of HTML5 with Android

I recently began diving into Android development and want to incorporate HTML5 as a cross-platform technology. However, I'm not familiar with HTML5 or how it interacts with Android. Despite my efforts to research this topic, I still feel lost on where ...

androidhtml

Improving the efficiency of rendering multiple objects on a canvas

I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...

javascripthtmlcanvasrenderingpixi.js

XML does not operate like a conventional function

I've been struggling with this issue for hours. Does anyone know how to fix it? I keep getting an error message saying "xmlDoc is not a function". var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; loadXMLDoc(); function loadXMLDoc() { ...

javascriptjqueryarraysxml

Position the spinner in the center of the user's screen

I created my own spinner: '''' #spinner-bg-loading{ position: absolute; left: 50%; top: 25%; width: 80px; height: 80px; margin: -75px 0 0 -75px; border: 16px solid #FFFFFF; border-radius: 50%; border-top: 16px solid #1 ...

javascripthtmlcss

Having trouble with carousel functionality in ejs and node.js when implementing a foreach loop

I am currently facing an issue with dynamically rendering a carousel, as all the items are showing up on the same page. I am using ejs and node.js. Could you please review the code snippet below where I am trying to add classes dynamically but it's no ...

javascriptnode.jsbootstrap-4ejscarousel

Retrieve the Checkbox id of a material-ui checkbox by accessing the object

I'm currently working on extracting the id of a Checkbox object in my JSX code. Here's how I've set it up: <div style={{display: 'inline-block', }}><Checkbox id='q1' onclick={toggleField(this)}/></div> ...

javascriptreactjsmaterial-ui