Flexible Text Block with CSS and JavaScript

I am sure that you get what I am talking about. Basically, This is an experiment to create flexible or responsive text with 100% width of screen size. Previously I have shared a CSS blockquote design, this is also a blockquote but this time it’s about full width.

Today you will learn to create a flexible paragraph with the screen’s full width. This is responsive design these texts will fit on any screen size, you can see also live transformation if you resize the window slowly. This font resize function is created using JavaScript. You can use this program on your review section, quote section, etc.

So, Today I am sharing Responsive Full Width Text With CSS and JavaScript. In other words, Flexible Text Block or Paragraph quote. I have used normal HTML CSS & JavaScript, I did not use any library for creating that. I think you should know this technique to create flexible texts. This program is very easy to understand, nothing is difficult here. If you have basic knowledge of JS then you can get it easily.

If you are thinking now how this Responsive Text Block actually is, Then see the preview given below.

Preview Of Flexible Text Block With 100% Width

See this video preview to getting an idea of how this program looks like.

Now you can see this visually. If you like this, Then get the source code of its.

Responsive Full Width Text With CSS and JavaScript Source Code

Before sharing source code, Let’s talk about it. As you know I have used JavaScript mostly to create this. Basically, I have created an HTML Blockquote and put every line in a separate span. Also with this, I have created another span with a different class for command & full stop.

In the CSS section, First I have put 100vh of height. After that, I have put other properties for the font family,grid display, etc. With JavaScript, I have created 2 variables for text and special characters like comma, full stop. The main thing is in the javascript files is put the size of the font. For this, I have divided 120 by text length (info), The code looks like this: elem.style.fontSize = 120 / elem.innerHTML.length + "vw"

You will understand fully after getting the codes because codes are easy to understand. For creating this full width text program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<html lang="en" >
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Full-Width Text | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
  
</head>
 
<body>
  <blockquote class="block">
    <span class="texts">Success is no accident</span><span class="append">.</span>
    <span class="texts">It is hard work</span><span class="append">,</span>
    <span class="texts">learning, studying, sacrifice</span>
    <span class="texts">and most of all</span><span class="append">,</span>
    <span class="texts">love of what</span>
    <span class="texts"> you are doing</span>
    <span class="texts">or learning to do</span><span class="append">.</span>
    <cite>
	    <span class="texts"> —Pele</span>
		</cite>
  </blockquote>
  
  <script  src="function.js"></script>
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body {
  display: flex;
  font-family: 'Lato', sans-serif;
  margin: 0;
  min-height: 100vh;
}
 
cite {
  font-stretch: condensed;
  font-style: normal;
  font-weight: bold;
}
 
.block {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin: auto;
  text-transform: uppercase;
  width: max-content;
}
 
.texts,
.block cite {
  display: flex;
  grid-column: 1;
  justify-content: space-between;
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
var lines = document.querySelectorAll(".texts");
var appendages = document.querySelectorAll(".append");
 
var wrapCharacters = function(lines) {
  return lines.forEach(function(line) {
    var characters = line.innerHTML.split("");
    var wrappedCharacters = characters
      .map(function(character) {
        if (character === " ") {
          return '<span class="texts">&nbsp;</span>';
        }
        return '<span class="texts">' + character + "</span>";
      })
      .join("");
    return (line.innerHTML = wrappedCharacters);
  });
};
 
var useSiblingFontSize = function(elem) {
  elem.style.fontSize = elem.previousSibling.style.fontSize;
};
 
var setFontSize = function(elems) {
  return elems.forEach(function(elem) {
    if (!elem.classList.contains("append")) {
      return (elem.style.fontSize = 120 / elem.innerHTML.length + "vw");
    }
    return useSiblingFontSize(elem);
  });
};
 
var formatTextBlocks = function() {
  setFontSize(lines);
  setFontSize(appendages);
  wrapCharacters(lines);
};
 
formatTextBlocks();

That’s It. Now you have successfully created Responsive Full Width Text With CSS and JavaScript, Flexible Text Block with 100% screen width.

If you liked this post, share it with all of your programming buddies! Thank you!

Further reading


Originally published on https://webdevtrick.com

#javascript #css #html #web-development

What is GEEK

Buddha Community

Flexible Text Block with CSS and JavaScript
Vincent Lab

Vincent Lab

1605177504

Text to Speech in Node.js

In this video, I will be showing you how to turn text into speech in Node.js

#javascript #text to speech #javascript api #text to speech app #node.js text to speech #javascript text to speech

Lyda  White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Flexible Text Block with CSS and JavaScript

I am sure that you get what I am talking about. Basically, This is an experiment to create flexible or responsive text with 100% width of screen size. Previously I have shared a CSS blockquote design, this is also a blockquote but this time it’s about full width.

Today you will learn to create a flexible paragraph with the screen’s full width. This is responsive design these texts will fit on any screen size, you can see also live transformation if you resize the window slowly. This font resize function is created using JavaScript. You can use this program on your review section, quote section, etc.

So, Today I am sharing Responsive Full Width Text With CSS and JavaScript. In other words, Flexible Text Block or Paragraph quote. I have used normal HTML CSS & JavaScript, I did not use any library for creating that. I think you should know this technique to create flexible texts. This program is very easy to understand, nothing is difficult here. If you have basic knowledge of JS then you can get it easily.

If you are thinking now how this Responsive Text Block actually is, Then see the preview given below.

Preview Of Flexible Text Block With 100% Width

See this video preview to getting an idea of how this program looks like.

Now you can see this visually. If you like this, Then get the source code of its.

Responsive Full Width Text With CSS and JavaScript Source Code

Before sharing source code, Let’s talk about it. As you know I have used JavaScript mostly to create this. Basically, I have created an HTML Blockquote and put every line in a separate span. Also with this, I have created another span with a different class for command & full stop.

In the CSS section, First I have put 100vh of height. After that, I have put other properties for the font family,grid display, etc. With JavaScript, I have created 2 variables for text and special characters like comma, full stop. The main thing is in the javascript files is put the size of the font. For this, I have divided 120 by text length (info), The code looks like this: elem.style.fontSize = 120 / elem.innerHTML.length + "vw"

You will understand fully after getting the codes because codes are easy to understand. For creating this full width text program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<html lang="en" >
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Full-Width Text | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
  
</head>
 
<body>
  <blockquote class="block">
    <span class="texts">Success is no accident</span><span class="append">.</span>
    <span class="texts">It is hard work</span><span class="append">,</span>
    <span class="texts">learning, studying, sacrifice</span>
    <span class="texts">and most of all</span><span class="append">,</span>
    <span class="texts">love of what</span>
    <span class="texts"> you are doing</span>
    <span class="texts">or learning to do</span><span class="append">.</span>
    <cite>
	    <span class="texts"> —Pele</span>
		</cite>
  </blockquote>
  
  <script  src="function.js"></script>
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body {
  display: flex;
  font-family: 'Lato', sans-serif;
  margin: 0;
  min-height: 100vh;
}
 
cite {
  font-stretch: condensed;
  font-style: normal;
  font-weight: bold;
}
 
.block {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin: auto;
  text-transform: uppercase;
  width: max-content;
}
 
.texts,
.block cite {
  display: flex;
  grid-column: 1;
  justify-content: space-between;
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
var lines = document.querySelectorAll(".texts");
var appendages = document.querySelectorAll(".append");
 
var wrapCharacters = function(lines) {
  return lines.forEach(function(line) {
    var characters = line.innerHTML.split("");
    var wrappedCharacters = characters
      .map(function(character) {
        if (character === " ") {
          return '<span class="texts">&nbsp;</span>';
        }
        return '<span class="texts">' + character + "</span>";
      })
      .join("");
    return (line.innerHTML = wrappedCharacters);
  });
};
 
var useSiblingFontSize = function(elem) {
  elem.style.fontSize = elem.previousSibling.style.fontSize;
};
 
var setFontSize = function(elems) {
  return elems.forEach(function(elem) {
    if (!elem.classList.contains("append")) {
      return (elem.style.fontSize = 120 / elem.innerHTML.length + "vw");
    }
    return useSiblingFontSize(elem);
  });
};
 
var formatTextBlocks = function() {
  setFontSize(lines);
  setFontSize(appendages);
  wrapCharacters(lines);
};
 
formatTextBlocks();

That’s It. Now you have successfully created Responsive Full Width Text With CSS and JavaScript, Flexible Text Block with 100% screen width.

If you liked this post, share it with all of your programming buddies! Thank you!

Further reading


Originally published on https://webdevtrick.com

#javascript #css #html #web-development