Is it possible to utilize CSS for text styling based on the language being used?
For instance, the font Tahoma is commonly used for Arabic text, but its size may appear extremely small when applied to English text of the same size.
Therefore, in scenarios where there is English text within Arabic text, is there a method to automatically recognize the switch in language and adjust the font size accordingly for the English text embedded in the Arabic one?
Thank you.
There isn't a built-in CSS solution for this specific task, but you can experiment with iterating through each text node in JavaScript and checking for alphabetic characters without case sensitivity (match(/^[a-z]+$/i)). Keep in mind that this method won't guarantee the language is specifically English.
If the condition is met, you can assign a custom class to the parent element, such as appears-english, and then style it using CSS properties like
.appears-english { font-size: 120% }Upon request, below is a sample code snippet...
var divs = document.getElementsByTagName('div');
for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
var div = divs[i];
if (div.firstChild.nodeValue.match(/^[a-z]+$/)) {
div.className += 'appears-english';
}
}
.appears-english {
font-size: 170%;
}
The provided fiddle demonstrates that numbers are not matched - you can modify the regex to include numbers, letters, and underscore by changing [a-z] in the regex to \w.
Additionally, if you need to update English characters within an element that also contains Arabic characters, consider using replace() and wrapping them in span elements assigned with the appears-english class.
Hey there! I am just starting out with JS and Vue. Currently, I have a Vue application that pulls date information from an open API. The tricky part is that the API response includes both the date and time in one string (for example: 2019-10-15T09:17:11.80 ...
I encountered the error "Cannot destructure property linerGradiant of r as it is undefined" during runtime, making it difficult to debug. The issue seems to stem from the compiled JS file, which is hard to read. The function is defined as follows: functio ...
Check out my code snippet on JSFiddle: http://jsfiddle.net/nom4mxLt/ <div id="wrapper"> <div id="yellow">variable height (I put 200px but can change in realtime)</div> <div id="red">This one should fill all remaining space ...
I am struggling with adjusting the list style in my bootstrap navbar. Whenever I click on the highlight button, it squeezes my navbar and I'm not sure how to fix it. <div id="links"> <a href="index.html">Home& ...
Utilizing either TypeScript or Facebook's Flow (type), I am empowered to statically assign types to variables like this: function add (x: integer, y: integer) { ... } Both TypeScript and Flow are able to identify and prevent incorrect invocations su ...
I'm looking for a simple script that can show one script to visitors from the US and Canada, and another script to visitors from other countries. It doesn't have to be perfect, but using a service like seems too complex for me. Is there a stra ...
Looking to create a sleek horizontal navigation bar using an unordered list with list items representing each element: To ensure the elements fit perfectly within the bar, I set the width of each at 25% and added a box-shadow for a border. Using a traditi ...
I've recently started exploring Vue and encountered an issue with a component's "mounted" method not triggering. Despite thorough checks for errors or warnings, and reviewing the code multiple times, I can't seem to pinpoint the problem. Str ...
Allow me to present what may seem like a Frankenstein's monster idea, but please hear me out. I have a specific type that I work with: export enum detailsDataTypes { MACHINE = 'MACHINE', USER = 'USER', ABSTRACT = 'ABSTRA ...
Working on a calculator that accurately computes the field price and displays it, but facing an issue where the correct answer seems to merge with another value (likely from data-price as they match). Snippet of the code: var updateTotal = function() { ...
As a beginner in CSS, I am encountering some issues with the HTML page of my application. I am currently working on an app and aiming to create a login view where the login form appears either after a voice command or button click. I am facing two main pro ...
I'm looking to challenge myself by integrating and testing JavaScript code within a Ruby environment. My main goal is to utilize Ruby to set up the database, interact with it using my JavaScript model, and verify the JavaScript state without resorting ...
Could something similar to this scenario be achievable? const dynamicPropName = "x"; class A { static propName = 1 // equivalent to static x = 1 } A[dynamicPropName] // will result in 1 or would it need to be accessed as (typeof A)[dynamicPropN ...
Currently, I am utilizing a PHP for loop to display 10 tags on an HTML page. My challenge lies in wanting the <a> tags to be displayed on separate lines with some spacing. It's common practice to handle this through custom CSS, however, is ther ...
Looking for some help with a question I have... I've been experimenting with the new Polymer 2.0 preview on Safari, but it doesn't seem to be working correctly. I'm using a simple code (just my-element) in the index.htm file, loading the pol ...
As I work on defining multiple media queries, I realize there is some redundant code within them: @media only screen and (max-width:768px), only screen and (min-width:769px) and (max-width:1040px) { .list__figure { margin-right: 20px; ...
Is there a better way to write multiple queries in succession? For example: Space.findOne({ _id: id }, function(err, space) { User.findOne({ user_id: userid }, function(err, user) { res.json({ space: space, user: user}); }); }); It can g ...
Trying to use Fullpage.js for a website with unique sections on different domains using full-screen iframes. However, encountering issues with scrolling on IOS mobile devices. The first solution rendered the page completely unscrollable: <iframe src=" ...
Exploring the behavior of console.log(obj) compared to console.log("obj"+"\n"+obj) in the code snippet below reveals two distinct output outcomes. const obj = new Object() obj.first = 'John' obj.last = 'Doe' obj.alive = true ob ...
I am attempting to extract all the values from the data-hiringurl attributes found on this particular page . When I used var data = $("li").attr('data-hiringurl'); and var data = $("li").data('hiringurl'); in the console, an error mess ...