Displaying both English and Gujarati text in a single document | Font compatibility glitch

In my application, I have text displayed in both English and Gujarati languages on the same page. For example:

Name/નામ

The issue arises when I apply a font like Verdana to the body tag through CSS - it affects the appearance of the Gujarati text as well, making it difficult to read properly. This is because my application uses absolute positioning for elements containing the text.

Switching to the shruti font helps with the Gujarati text but results in the English text not being displayed correctly.

Changing fonts individually for the English and Gujarati text is not a viable solution due to the extensive modifications required in my application.

Please provide an alternative or solution to this problem. Thank you.

htmlcssfonts

Answer №1

To effectively display your Gujarati text, a convenient approach would be to encapsulate it within a span element that is specifically designated for Gujarati content.

<span class="gujarati">...</span>

Once this is done, you can configure the CSS so that the font style Verdana is applied universally, except for elements marked with the class name gujarati.

body { font-family: Verdana; }
.gujarati { font-family: shruti; }

This methodology enables you to avoid altering all of your content and instead concentrate solely on adjusting the Gujarati segment.

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

What causes the collapse of text in neighboring rows?

I am struggling to display all the data in each column without using ellipsis. The data is getting collapsed with the adjacent row. I need a way to show the entire content of each column, even if it's large. Unfortunately, I don't know the exact ...

javascriptjqueryangularjscssionic-framework

Tips for adjusting the content direction of a Popover

I am currently working on a component that includes the following code: import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, Button, } from "@chakra-ui/react"; import { ReactNode } from "react"; import { Co ...

cssreactjschakra-ui

Error: The functionXXX is missing and cannot be found when HTMLInputElement is clicked

During my selenium automation test, I encountered an issue with a remote webdriver while trying to launch an HTML file. Although the HTML page opened correctly, an error occurred when attempting to click on a submit button that calls a javascript function ...

javascripthtmlselenium

Transmit data from list items in the HTML to a form

Based on my understanding, there are limited options available to style an <option> tag within a <select> dropdown and it appears quite plain. So I was thinking about creating a more visually appealing dropdown using <ul> <li> tags ...

htmlcssselecthtml-lists

Embedding HTML within a PHP conditional statement

I recently encountered an issue while trying to display a source image using PHP. The initial code worked perfectly: <html> <h3>First Test</h3> <img src="example1.php" /> </html> However, I wanted to implement user validatio ...

phphtml

Ways to enlarge an image while hovering the mouse over it without disrupting the positions of other images (JQuery)

Is there a way to achieve a similar effect to Google Images, where the image pops and comes in front when we mouse over it without affecting the positions of other images? This should only happen when the cursor is still and not moving around randomly. I ...

jqueryhtmlcss

Incorporate multipart data into your HTML form for increased versatility and

Can HTML form input values be set as multipart data? I am attempting to prepare an image for upload while submitting an HTML form (the desired remote image data is generated by PHP). For example: <form action="http://remote_site.com" method="post" en ...

phphtmlformsmultipartform-data

Unforeseen outcomes discovered by stacking one div over another, all without relying on z-index

My current project involves two stacked divs, each measuring 100px by 100px. The bottom div includes a black border on top, as shown in this example. <div id="top"></div> <div id="bottom"></div>​ div { width: 100px; height ...

csscss-floatpositionz-index

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

javascriptjqueryhtmlcss

Is there a glitch in MacOS Firefox's background-size:cover feature? Any tips on how to work around it?

Here is an example link to see the issue: I've noticed there is a strange empty 1px line at the bottom of the box. It seems to occur when Firefox tries to resize an image with an odd number of lines. Has anyone else encountered this problem? If so, h ...

macosfirefoxcss

The added class is not being successfully applied to the ClassList

I'm currently working on a page where I want the colors of a button and the background to switch when the button is clicked. document.querySelector("body.light").classList.toggle("dark"); document.querySelector("button.dark").classList.toggle("light" ...

javascriptcss

Update the JavaScript and CSS files following an AJAX request with $.get

I am encountering an issue where my global CSS and JS files contain all the necessary definitions, but when I load new HTML blocks via AJAX $.get, these new elements do not receive the correct CSS/JS definitions. Is there a convenient way to refresh the ...

javascriptjquerycssajax

Retrieve data from an online JSON file

I am still learning about working with json and would appreciate some guidance. The data file I need to access is located at this url - I would like to display it in the following format: <ul id="smenu"> <li></li> </ul> Cou ...

javascriptjqueryhtmlcssjson

Using jQuery, you can apply a class to an element and then have it removed automatically after

Is there a way to add a class and then remove it after 500 milliseconds using jQuery? I tried using delay() but it didn't work as expected. Here is a simple example where I am changing the background color: Check out this code pen jQuery $('.b ...

jqueryhtmlcss

Tips for staying on the same tab after submitting the form

I have encountered an issue where I need to keep the current tab selected even after submitting a form or refreshing the page. This is how my View File appears: <ul class='tabs'> <li><a href='#tab1'>Tab 1< ...

htmljquery

What is the best way to ensure a logo image is properly scaled to fit its parent container using Bootstrap 4

I am struggling with my navigation bar, which consists of a simple logo and a few links. The issue I am facing is that the logo image is too tall for the parent container, which has a fixed height. It's clear that the logo with the gray background e ...

htmlcssbootstrap-4

Guide on transferring a WordPress website to a new domain

I manage a WordPress blog on my main domain, but I am looking to duplicate the entire blog onto a secondary "dummy" domain so I can experiment with significant changes without impacting my primary domain. My main domain is and my dummy domain is Althoug ...

htmlwordpress

Guidance on displaying values from one PHP file in another PHP file

Is it possible to achieve this scenario? I have two files, named main.php and submenu.php. In main.php, I have the main menu defined as follows: In another file called submenu.php, I have a list structured like this: <ul> <li>1</li> &l ...

phpjavascripthtmlcss

Utilizing AngularJS in conjunction with Asp: UpdatePanel

<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminMasterpage.master" AutoEventWireup="true" CodeBehind="ExamSet.aspx.cs" Inherits="demo.Admin.ExamSet" %> <asp:Content ID="Content1" ContentPlaceHolderID="content" runat="server"> <s ...

javascriptc#htmlasp.netangularjs

What is the best way to create a line break in a React caption without it being visible to the user?

Is there a way to add a break or invisible character between "we make it simple" and "to create software" in order to match the Figma design for the React web app caption? https://i.stack.imgur.com/Z4rpt.png https://i.stack.imgur.com/06mMO.jpg https://i.s ...

htmlcss