Is it possible to run a single line of text wrapped in a single tag, and then output it with a background colour, breaks into multiple lines encased in a box, and these boxes are translucent that overlapped each other?
I have a demo in JSFiddle >here<.
<div class="wrap">
<p><b>Live a good life. If there are gods and they are just,</b>
</p>
<p><b>then they will not care how devout you have been,</b>
</p>
<p><b>but will welcome you based on the virtues you have lived by.</b>
</p>
<p><b>~Marcus Aurelius</b>
</p>
</div>
That up there is what I wanted to accomplish in terms of looks, but it is not what I wanted to accomplish in terms of markup.
I needed partcularly this line to break into seperate boxes that overlap:
<blockquote class="blue-tape">Live a good life. If there are gods and they are just,
then they will not care how devout you have been,
but will welcome you based on the virtues you have lived by.
Now how do I split these into boxed lines? ~Marcus Aurelius</blockquote>
Is this still a CSS3 job, or do we need to use JQuery now?
(CSS for all of it)
.wrap {
width:100%;
text-align:center;
}
p {
display:block;
}
b {
display:inline-block;
background-color: rgba(78, 145, 220, 0.5);
color: #55349E;
font-weight:100;
padding:10px 1% 18px;
margin:-10px auto;
white-space:pre-wrap;
text-align:center;
}
.blue-tape {
text-align: center;
font-weight: 100;
font-size: 14px;
color: #fff;
display: block;
background-color: rgba(78, 145, 220, 0.5);
line-height: 1.6677547em;
width:80%;
margin: 0 auto;
white-space: pre-wrap;
}
You can use a span with a background color and extra line-height, to achieve the desired effect: (Fiddle)
CSS
span {
background-color: rgba(78, 145, 220, 0.5);
line-height:180%;
padding:.5em 0em;
}
HTML
<span>Live a good life. If there are gods and they are just, then they will not care how devout you have been, but will welcome you based on the virtues you have lived by. Now how do I split these into boxed lines?</span>
Becomes:
Related
I work on a static web page that is supposed to help Chinese learners.
I paste below an extract of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pattaya&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youdao-Dayou Cidian</title>
<link rel="stylesheet" href="words_en_style.css">
<style>
body {
background-image: url("fond_caractères_transp.png");
background-repeat: repeat-y;
background-size: 100%;
}
.temp {
background-color: lightcoral;
margin-top: 80px;
}
.pinyin {
font-family: "Pinyin Okay", "Pattaya", sans-serif;
font-style: unset;
opacity: 0.6;
}
.green {
font-family: "Courier new", monospace;
font-size: 3px;
font-style: unset;
opacity: 0;
line-height: 0.6;
.baratin {
font-family: "Courier new", monospace;
font-size: 18px;
}
.nota {
line-height: 0.6;
}
.commentaire {
font-family: "Courier new", monospace;
font-size: 15px;
line-height: 0.6;
}
.bluemark {
color: rgb(43, 32, 201);
}
#shang {
background-color: rgb(230, 240, 93);
font-family: "Ma Shan Zheng", cursive;
position: fixed;
right: 1.4%;
top: 98%;
width: 8em;
margin-top: -1.6em;
font-size: 14px;
font-weight: bolder;
animation: Test 1s infinite;
}
#keyframes Test {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
h1 {
color: rgb(241, 0, 133);
text-align: center;
text-shadow: 3px 3px 1px rgb(117, 190, 99);
font-family: "Ma Shan Zheng", cursive;
font-size: 68px;
margin-top: 1.8%;
}
p {
font-family: "Ma Shan Zheng", cursive;
font-size: 26px;
margin-top: 2px;
margin-bottom: 2px;
}
#tableaucomposants {
width: 96%;
text-shadow: 3px 3px 1px rgb(204, 140, 163);
font-family: "KaiTi Normal", cursive;
font-size: 30px;
background-color: rgb(245, 174, 196);
position: relative;
margin-top: 0.2%;
margin-left: auto;
margin-right: auto;
text-align: left;
font-style: bold;
padding-top: 1%;
padding-left: 1.4%;
padding-right: 1.4%;
padding-bottom: 0.8%;
}
a:link {
color: inherit;
text-decoration: none;
font-family: "Ma Shan Zheng", cursive;
font-size: 26px;
}
#N°1,
#N°5,
#N°6 {
width: 96%;
font-family: "Ma Shan Zheng", cursive;
font-size: 26px;
background-color: rgb(245, 174, 196);
position: relative;
margin-top: 1%; margin-left: auto; margin-right: auto;
text-align: left;
font-style: bold;
padding-top: 1%; padding-left: 1.4%; padding-right: 1.4%; padding-bottom: 0.8%;
}
</style>
</head>
<body>
<h1>有道-打有 词典</h1>
<section id="tableaucomposants">
氵， 艹 ， 木， 口，
钅 ，
扌， 亻/ 人. <br>
<span class="commentaire">Actually under construction :-) </span>
</section>
<!-- To fill with existing id -->
<section id="N°1">
<p> 氵<span class="baratin"> same as 水: Radical N° 85, not indecomposable,
graphic component N° 43.
876 characters in the Wenlin dictionary, 148 in this Youdao-Dayou lexicon. </span></p>
<p class="nota"> <span class="commentaire">This element is a reference to the liquid (3 drops of
water) and is
always placed on the left of the character it builds. In this form, the third and last stroke is
carried out going up
from left to right, to chain the writing of the following component: it is a ㇀
<span class="pinyin">tí </span>
<span class="green">. </span> 提. This is the most common radical, key, in combination.
No word for this component.<br>
<span class="green">. </span></span></p>
<p><span class="baratin">Used as a radical in:</span> 澳，滨，波，泊，测，
潮，沉，澄，池，淡，滴，淀，洞，渡，洱，法，泛，
沸，浮，港，沟，灌，滚，海，汉，汗，涵，浩，河，洪，湖，滑，汇，混，
浑，活，济，激，渐，江，浇，洁，津，浸，渴，溃，滥，浪，泪，淋，流，
溜，漏，沦，洛，满，漫，没，泌，渺，漠，沫，泥，浓，派，潘，泡，漂，
泼，浦，瀑，汽，漆，泣，浅，潜，清，渠，溶，汝，润，洒，沙，涉，深，
沈，渗，湿，淑，滩，潭，汤，淌，涛，淘，滔，添，涂，湾，汪，温，沃，
污，洗，溪，湘，消，泄，泻，汹，汛，涯，演，沿，淹，淹，洋，液，溢，
泳，涌，游，油，渔，浴，源，渊，澡，泽，渣，沾，涨，浙，治，汁，滞，
洲，注，滋.<br> <span class="baratin"> 139/ ... / 865.</span></p>
<p><span class="baratin">Used as a component of an indecomposable: </span>. </p>
<p><span class="baratin">Used as a component of a character: </span>荡，范，鸿，酒，梁，茫，萍，染，
烫. </p>
</section>
<section id="N°5">
<p> 钅<span class="baratin"> same as </span> 金<span class="baratin">: Radical N° 167,
not indecomposable,
graphic component N° 76.
219 + 488 characters in Wenlin, 40 in this lexicon. </span></p>
<p class="nota"> <span class="commentaire">This graphical element was obtained by compressing
the character 金 on
its width (Compare: 金, 釒, 钅 with 言, 訁, 讠). As 金 <span class="pinyin">jïn</span>,
which means metal, gold, this component refers
to the metal element. It is placed on the left of the characters it composes.
No word for this component.<br><span class="green">. </span></span></p>
<p><span class="baratin">Used as a radical in:</span> 铲，钞，锤，错，钓，钉，锻，锋，钢，钩，锅，键，
锦，
镜，链，铃，铝，锣，铭，铺，钱，铅，钦，锐，锁，铁，
铜，锡，镶，销，银，镇，针，钟，铸，钻. <br>
<span class="baratin"> as </span>金 <span class="baratin"> => </span> 鉴，金. </p>
<span class="baratin"> 36 + 2 / 694.</span></p>
<p><span class="baratin">Used as a component of an indecomposable: </span>. </p>
<p><span class="baratin">Used as a component of a character: as </span> 钅 => 衔. </p>
</section>
<section id="N°6">
<p> 扌<span class="baratin"> same as 手/龵: Radical N° 64, not
indecomposable, graphic component N° 19.
566 characters in Wenlin, 151 in this lexicon. </span></p>
<p class="nota"> <span class="commentaire">This element is a reference to the hand, or a manual
gesture and
is always placed, when used as a radical, on the left of the character it is composing.
It represents a hand and its fingers apart. Surnamed 提手旁
<span class="pinyin">tí</span><span class="pinyin">shôu</span><span class="pinyin">páng</span>,
contained
in the word 提 <span class="pinyin">tí</span> which means rising stroke from left to right, and
of which the last stroke is just an example.
No word for this component.<br>
<span class="green">. </span></span></p>
<p><span class="baratin">Used as a radical in:</span> 挨，按，把，拔，扒，
摆，搬，扮，拌，报，抱，播，拨，搏，捕，擦，操，
插，拆，抄，撤，扯，撑，撑，持，抽，摧，措，挫，打_，搭，担，挡，
捣，抵，掉，抖，扶，抚，拂，搞，搁，拱，挂，拐，护，换，挥，技，挤，
捡，拣，搅，接，揭，捷，据，拒，拘，捐，掘，抗，扛，控，扣，括，扩，
拉，拦，捞，拢，搂，掠，抹，描，摸，挠，拟，捏，扭，挪，排，拍，抛，
捧，批，披，拼，扑，抢，扰，扔，揉，撒，扫，摄，拾，授，摔，撕，搜，
损，拓，抬，探，摊，掏，提，挑，挺，投，推，托，拖，挖，挽，握，捂，
掀，携，押，掩，扬，摇，抑，拥，援，择，扎，摘，找，招，折，振，挣，
指，执，掷，抓，撰，撞，捉.<br>
才. <br> <span class="baratin"> 143/ ... / 579.</span></p>
<p><span class="baratin">Used as a component of an indecomposable: </span>才. </p>
<p><span class="baratin">Used as a component of a character: </span> 垫，啦，啪，热，
势，逝，哲，浙. </p>
</section>
<button id="shang" > <a title="Tableau des Composants"
href="#tableaucomposants"> 上 <span class="green">.... </span> <span class="baratin"> Haut</span>
</a></button>
</body>
Actually, the pinyin class is working for all the five tones of the Chinese language: with a special font that can render äáâà ëéêè ïíîì öóôò üúûù and ÜÚÛÙ. There are now pedagogic methods that associate colors with Chinese tones to help to memorize them.
I want to associate red to the first tone ä, green to the second á, blue for the third â, and grey for the fourth à.
But I have to rewrite 4567 lines (x 2, EN and FR). A search for pinyin gives already 670 (1340) modifications to perform. This lexicon is not yet ended, but it is already a big work :-).
So if I can modify my only one class pinyin by the way of a few code lines, I save time and energy! Isn’t it that? The magical of code?
It looks like it would be possible with JavaScript using something like document.getElementsByTagName('pinyin') which would allow to test what is inside:
/ <span class="pinyin"> vowel to be tested /</span>
and function of the result allocates to the text the good color.
Is there an easier way to do that with PHP or just CSS?
You can use almost any language to do what you want to do, but each language has its speciality. PHP and Nodejs are back-end languages that work on the server - you don't need their server-side abilities but you can use their string-manipulation utilities to do what you need. You might find some challenges, though, uploading, transferring, and saving-out the edited files.
Similarly, javascript is a client-side language that runs in the browser. Still, you could use it to do this project. You might find some of the same challenges as with php.
On the other hand, there are a number of scripting languages that are almost tailor-made for your project. The goal is to choose the easiest and the most re-useable of the languages. These languages include Python, Perl, Windows Powershell, AutoHotKey (AHK), Wilson's WinBatch, etc. Personally, I've done massive projects in WinBatch* because it's so frickin' easy and has a decent help forum and loads of example code. (AHK is a freeware competitor to WinBatch that is more difficult to get started with, but is every bit as powerful). I've also done very significant projects in Python and find it almost as easy as WinBatch. A LOT depends on your operating system - WinBatch only works on Windows machines, but Python works everywhere.
My recommendation would be Python. There is tons of help available on StackOverflow, and the reusability factor is very high.
Your next consideration will be your IDE. WinBatch includes its own, quite dated, IDE but it does the job and allows stepping through your code. If using Python, my personal favorite (freeware) environments are VSCode and Notepad++. VSCode (make sure you have the Python and CodeRunner extensions installed) also allows stepping through code and is definitely the 2020 choice for IDE.
* WinBatch is commercial software that allows you a 21-day trial license that is fully functional except for the compiler. You should have tons of time to complete your project and kick the tires. Disclaimer: I am a long time WinBatch user but have no affiliation with the company whatsoever.
How can I make a textarea which has the stylesheet of the web page inside it?
I want to make a web page which a user can customize its <style> settings by editing text inside a textarea.
Here's what I have done so far; inside the <textarea> of this code snippet is the editable text which I intend to make it function as the web page's stylesheet, but I'm not sure how to make it work.
I did many web search looking for solutions, but could not find useful help regarding this particular function. Any help will be appreciated.
function myFunction() {
document.getElementsByTagName("style")[0].innerHTML = "document.getElementById('input').value;";
}
<p>sample text</p>
<textarea id="input" oninput="myFunction()" rows="5">p {
font-family: monospace;
font-size: 15px;
}
</textarea>
You're very close, but your code has 2 problems.
document.getElementsByTagName returns an array, so you need to select the first element of the array using [0].
You are not actually getting the input element, you're just using a string of the code you want to run (i.e. you want to run the code document.getElementById('input').value but you've put quotes around it, which turns it into a string).
This updated version should work:
function myFunction() {
document.getElementsByTagName("style")[0].innerHTML = document.getElementById('input').value;
}
<p>sample text</p>
<textarea id="input" oninput="myFunction()" rows="5">html {
font-family: monospace;
font-size: 15px;
}
</textarea>
Another possibility is to use inline styles with the display style set to "block" and the contenteditable attribute set to "true".
Example:
<div>
<style style="
display: block;
padding: 0 0.5rem;
border: 1px solid black;
border-radius: 4px;
white-space: pre;
font-family: 'Courier New', Courier, monospace;
font-size: small;
"
contenteditable="true">
#myDiv {
height: 100%;
--l1: repeating-linear-gradient(-60deg,
transparent 0,
transparent 5px,
rgba(210, 180, 140, 0.5) 0,
rgba(210, 180, 140, 0.5) 35px);
--l0: repeating-linear-gradient(60deg,
transparent 0,
transparent 5px,
rgba(210, 180, 140, 0.5) 0,
rgba(210, 180, 140, 0.5) 35px);
background: var(--l1), var(--l0);
}
</style>
<div id="myDiv"></div>
</div>
This will directly allow to edit and alter the contents of the style definitions by the user, without the direct possibility to save the modifications.
When executing the code below(on jsfiddle) for the first time, it alerts 2,2,3,2,5,9 in a sequential order.
however, executions after the first one always shows 2,2,3,2,6,9. (5 -> 6)
The right value is 6, as seen from a fifth paragraph in a red div on jsfiddle.
(this happens on chrome / safari on mac)
I assume the problem is it's not waiting for the construction of DOM of the appended element.
Any help is appreciated.
$(function(){
let eachPara = $("div:eq(0)").html().split("</p>");
let lineHeight = 18;
$("div:eq(0) p").each(function(i, val) {
$("#parent").append($(this).clone());
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
alert(eachRowN);
});
});
complete code:
https://jsfiddle.net/fptd4xkh/1/
$(function() {
let eachPara = $("div:eq(0)").html().split("</p>");
let lineHeight = 18;
$("div:eq(0) p").each(function(i, val) {
$("#parent").append($(this).clone());
let eachRowN = $("#parent p:eq(-1)").height() / lineHeight;
console.log(Math.round(eachRowN));
});
});
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
/* 両端揃え(均等割り付け) */
font-family: "Vesper Libre", serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>"Christmas won't be Christmas without any presents," grumbled Jo, lying on the rug.</p>
<p>"It's so dreadful to be poor!" sighed Meg, looking down at her old dress.</p>
<p>"I don't think it's fair for some girls to have plenty of pretty things, and other girls nothing at all," added little Amy, with an injured sniff.</p>
<p>"We've got Father and Mother, and each other," said Beth contentedly from her corner.</p>
<p>The four young faces on which the firelight shone brightened at the cheerful words, but darkened again as Jo said sadly, "We haven't got Father, and shall not have him for a long time." She didn't say "perhaps never," but each silently added it, thinking
of Father far away, where the fighting was.</p>
<p>Nobody spoke for a minute; then Meg said in an altered tone, "You know the reason Mother proposed not having any presents this Christmas was because it is going to be a hard winter for everyone; and she thinks we ought not to spend money for pleasure,
when our men are suffering so in the army. We can't do much, but we can make our little sacrifices, and ought to do it gladly. But I am afraid I don't," and Meg shook her head, as she thought regretfully of all the pretty things she wanted.</p>
</div>
<div id="parent"></div>
The spot from where you calculate doesn't have the correct font-face. Try the following.
Change:
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
font-family: "Vesper Libre", serif;
}
Into:
div {
font-family: "Vesper Libre", serif;
}
#parent {
width: 430px;
background-color: red;
}
#parent p {
width: 100%;
line-height: 18px;
font-size: 17px;
hyphens: auto;
text-indent: 1em;
text-align: justify;
}
I have a text on my website that scrolls horizontal through the page. I’m trying to get around 8 characters highlighted in black, while the rest is grey. But those characters are meant to vary as you scroll though, the highlighted bit should remain in place.
In case this doesn’t make any sense, if grey was an x, it should look something like this:
xxxxx xpsum dolox xxx xxxx
xxxx xxsum dolox sxx xxxx
xxx xxxum dolox six xxxx x
xx xxxxm dolox sit xxxx xx
I’m trying to get this done in jQuery, but I can’t get it to work. I also like to say that I’m not at all an expert in webdesign, so I don’t know what I’m doing. Anyway, I’ve tried two different approaches, one is to say “change colour of text when going over an underlying div”. The other approach is to change the colour of the text depending on the scrolling position, but the problem here is that it takes the scrolling position of the whole div, instead of a fixed position on the page. Both don’t work at the moment, examples are here:
jsfiddle 9p29tz2f
jsfiddle 9p29tz2f/1
If anyone has any ideas how to approach this, or needs some more clarification, please let me know. Many thanks!
Clone the text and set it as a child of the overlay box then scroll them together:
$(function(){
var $bodytext = $('#bodytext'),
$clone = $bodytext.clone();
//copy the text and append it to #black:
$clone.attr("id","clone").prependTo("#black");
//scroll #clone with #bodytext:
$bodytext.scroll(function(){
$clone.scrollLeft($bodytext.scrollLeft());
});
});
http://jsfiddle.net/9p29tz2f/2/
I've taken Teemu's solution and modified it a bit: http://jsfiddle.net/9af91wcL/2/
The important bits: The code moves a white DIV (#grey-overlay) on top of the text and makes it transparent. By adding black and white pixels, you get grey. The grey level is determined by the alpha channel (0.7 in the rgba() function).
You need to assign a height or it will look odd. I use 1.5em to make sure it doesn't overlap with the scroll bar of the #bodytext div.
Also make sure that the top/left position of both div's is the same.
In your real code, you can make the horizontal scrollbar disappear and scroll with JavaScript.
HTML
<div id="grey-overlay"></div>
<div id="bodytext">text...</div>
CSS
body {
background: #ffffff;
color: #000000;
font-family: sans-serif;
font-size: 200%;
}
#bodytext {
top: 15%;
width:200px;
height: 2em;
padding: 0;
position:absolute;
overflow-x:scroll;
overflow-y:hidden;
white-space: nowrap;
}
#grey-overlay {
background-color: rgba(255, 255, 255, 0.7);
width:40px;
height: 1.5em;
top:15%;
position:fixed;
z-index: 10;
}
You need to show the same content within #black as in #bodytext, and synchronize its position relative to #bodytext scrolling. This can be achieved by using an extra wrapper around #black. Something like this:
CSS:
#cover {
top: 15%;
height:50%;
width: 120px;
padding: 0;
position:fixed;
overflow-x: hidden;
background-color: #D8D8D8;
}
#black {
color: #000000;
width:100%;
height:100%;
top:0px;
left: 0px;
position:absolute;
white-space: nowrap;
z-index: 10;
}
#bodytext {
top: 15%;
width:100%;
height:85%;
padding: 0;
position:absolute;
overflow-x:scroll;
white-space: nowrap;
color: #D8D8D8;
}
HTML:
<div id="cover">
<div id="black"></div>
</div>
JS:
$(document).ready(function () {
var black = $('#black'),
btext = $('#bodytext');
black.text(btext.text()); // Clone the content
btext.scroll(function () {
var pos = btext.scrollLeft();
black.css('left', -pos + 'px'); // Set the position to match #bodytext
});
});
A live demo at jsFiddle.
Notice, that if you need some left margin, it has also to be "calculated in" to pos.
How can I bring my span immediately below the text inside the p tag
Here is the fiddle
http://jsfiddle.net/bobbyfrancisjoseph/H4U7r/
I am pasting the HTML code also here
<p class="now-p" style="color:#000;">IN THEATERS NOW
<br>
<span style="font-size:13px;"> Trailers,Songs,Ratings,Reviews & Comments</span>
</br>
</p>
The CSS is as follows.
.now-p {
padding-bottom:10px;
margin-bottom: 0px;
color:#91979e;
text-align:left;
font-size:36px;
font-weight:bold;
}
I am trying to make the output look something like this:
IN THEATERS NOW
Trailers,Songs,Ratings,Reviews & Comments
Now there is a space after IN THEATERS NOW . I am not able to get rid of that
The span is immediately below the text, it's the line height of the first line of the text that causes the spacing between the lines.
Set the line height of the first text to bring them together. (And you can use padding to indent the second line instead of spaces.)
HTML:
<p class="now-p" style="color:#000;">
<span class="header">IN THEATERS NOW</span>
<br>
<span class="text">Trailers,Songs,Ratings,Reviews & Comments</span>
</p>
CSS:
.now-p {
padding-bottom:10px;
margin-bottom: 0px;
color:#91979e;
text-align:left;
font-weight:bold;
}
.now-p .header {
font-size: 36px;
line-height: 35px;
}
.now-p .text {
font-size: 13px;
padding-left: 40px;
}
Demo: http://jsfiddle.net/H4U7r/2/
Try removing your break tags and add this to your css:
.now-p span{
display:block;
font-size:13px;
}
The space is due to the <br> in the line under the <p>. If you put IN THEATERS NOW<br/> with no spaces, there won't be any more problem.
This might not be the best way to achieve what you want. But I hope it'll help to understand why you had the problem.
use CSS line-height
.now-p {
line-height: 15px;
}