Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 355 of 652
How to set whether the text should be overridden to support multiple languages in the same document with JavaScript?
In this tutorial, we will learn how to set whether the text should be overridden to support multiple languages in the same document with JavaScript. Use the unicodeBidi property in JavaScript to set whether the text should be overridden to support multiple languages in the same document. Set it to normal, embed, or bidi-override. The bidi-override allows you to add the direction, i.e., rtl to ltr. Understanding Unicode Bidirectional Text The unicodeBidi property controls the bidirectional text algorithm for elements containing text in multiple languages, especially when mixing left-to-right (LTR) and right-to-left (RTL) scripts like Arabic or ...
Read MoreHow to handle tabs, line breaks and whitespace in a text in JavaScript?
In this tutorial, we will learn how to handle tabs, line breaks, and whitespace in text using JavaScript's CSS white-space property. JavaScript provides control over text formatting through the style.whiteSpace property. This property has several values that determine how whitespace is handled: normal - Default value; collapses multiple spaces into one, wraps text automatically pre - Preserves spaces and tabs, respects line breaks pre-wrap - Like 'pre' but also wraps long lines pre-line - Preserves line breaks but collapses spaces ...
Read MoreHow to set the width of an element in JavaScript?
In this tutorial, we will learn to set the width of an element in JavaScript. We can use the "width" property in JavaScript to set the width of an element. The web page should be responsive on every screen. Each element on a web page should have its area covered. We can set the size of elements by setting their width and height. Let us look at how to set the width of an element in JavaScript. Following is the property by which we can set the width of an element in JavaScript − ...
Read MoreHow to set line breaking rules for non-CJK scripts in JavaScript?
The word-break CSS property controls how words break when text overflows its container. For non-CJK (Chinese, Japanese, Korean) scripts like English, you can set different line breaking behaviors using JavaScript. Syntax element.style.wordBreak = "value"; word-break Property Values Value Description Use Case normal Default breaking rules Standard text flow break-all Break anywhere, even mid-word Prevent overflow in narrow containers keep-all Don't break CJK text Preserve CJK word integrity Example: Interactive Word Breaking ...
Read MoreHow to set the spacing between words in a text in JavaScript?
In this article, we will learn how to set the spacing between words in a text using JavaScript. Word spacing is critical on websites because it improves the legibility and readability of the text displayed on the page. You can generate an aesthetically pleasing and easy-to-read typeface using proper word spacing. In JavaScript, we use the wordSpacing property to set the spacing between the words in a text displayed on a website. Using the Style wordSpacing Property This JavaScript DOM property is used to get and set the spacing between the words in a text. You ...
Read MoreHow to set the bottom position of a positioned element with JavaScript?
In this tutorial, we will learn how to set the bottom position of a positioned element with JavaScript. The position property sets how the element should be positioned in the DOM, and the top, bottom, left, and right properties set the final location of the positioned elements. In JavaScript, we have different ways to set the bottom position of a positioned element, and in this tutorial, we will learn two of them − Using the style.bottom Property Using the style.setProperty Method Using the style.bottom Property In ...
Read MoreHow to set the stack order of a positioned element in JavaScript?
In this tutorial, we shall learn to set the stack order of a positioned element in JavaScript. To set the stack order, we can use the style zIndex property. Let's first check what the stack order is. The stack order says the order in which the DOM elements are displayed. This is the element's position on the z-axis. Now, what is a positioned element? A positioned element has relative, absolute, fixed, or static positions. Why do we need to go for the stack order? Elements might overlap and look clumsy when positioned; therefore, we go for the ...
Read MoreHow to set the style of an element's border with JavaScript?
In this tutorial, we shall learn to set the style of an element's border with JavaScript. To set the style of an element's border, use the borderStyle property in JavaScript. Let us discuss the borderStyle property available in detail. Using the borderStyle Property With the borderStyle property, we can set or return the style of an element's border. Syntax Following is the syntax to use the borderStyle property to set the style of an element's border with JavaScript − object.style.borderStyle = style; This syntax allows us to set the required border ...
Read MoreHow to allow long and unbreakable words to be broken and wrap to the next line in JavaScript?
Use the wordWrap CSS property in JavaScript to allow long and unbreakable words to be broken and wrap to the next line. This property is especially useful when dealing with long URLs, email addresses, or continuous text that would otherwise overflow their container. Syntax element.style.wordWrap = "break-word"; wordWrap Property Values Value Description normal Default behavior - only ...
Read MoreCalculate text width with JavaScript
To calculate text width, we can use the measureText() method in JavaScript. In canvas, the measureText() method is used to measure width of the text content. This means we can pass text to this canvas method and then call that method to measure the text. It will return an object that contains information about the measured text. Sometimes, width may be a float value; hence the Math.ceil() method is used to round the value and returns an integer. Syntax Following is the syntax of the method used to calculate the text width: const text = ...
Read More