I want to align the text with "=" sign, as of the picture below:
I can do it using mathjax but I want to make it using css if possible. But the way I did it is not making the equals to sign aligned one to another. I want your help.
This is what I tried,
Solution, <br>
Given, f(x) = 3x <br>
g(x) = x + 2 <br>
fog(x) = 18 <br>
To find: x = ?, <br>
Now, <br>
fog(x) = 18 <br>
or, f(x + 2) = 18 <br>
or, 3(x + 2) = 18 <br>
or, x + 2 = 6 <br>
∴ x = 4
You can use display, text-align and width in your classes:
.c-left{
text-align: right;
width: 50px;
display: inline-block;
}
.c-mid{
text-align: center;
width: 10px;
display: inline-block;
}
.c-right{
text-align: left;
width: 50px;
display: inline-block;
}
<div>
<div class="c-left">a + b</div>
<div class="c-mid">=</div>
<div class="c-right">c</div>
</div>
<div>
<div class="c-left">2a + 2b</div>
<div class="c-mid">=</div>
<div class="c-right">3c</div>
</div>
Not sure if this is what you need...
Your problem is arranging the text into a form that's easily style-able using CSS.
Assuming your text comes in the form of a JSON array of strings, i.e:
[
"Solution,",
"Given, f(x) = 3x",
"g(x) = x + 2",
"fog(x) = 18",
"To find: x = ?,",
"Now,",
"fog(x) = 18",
"or, f(x + 2) = 18",
"or, 3(x + 2) = 18",
"or, x + 2 = 6",
"∴ x = 4"
]
...you want a function which turns it into style-able markup.
Here's an example using vanilla Javascript and CSS grid:
[...document.querySelectorAll('math-element')].forEach(el => {
// reset, in case you run this more than once...
el.innerHTML = '';
// we need JSON.parse as dataset.text is a string
JSON.parse(el.dataset.text).forEach(text => {
const div = document.createElement('div');
// split each row by `=` sign, if it has any
text.split('=').forEach(t => {
const span = document.createElement('span');
if (text.split('=').length < 2) {
// adds `.single` to items which are single on their row
span.classList.add('single');
}
span.innerHTML = t;
el.appendChild(span);
});
// add a `<hr>` after each element
const separator = document.createElement('hr')
el.appendChild(separator);
})
})
math-element {
display: grid;
grid-template-columns: auto 1fr;
}
math-element hr {
display: none;
}
math-element span {
grid-column-start: 1;
text-align: right;
padding: 0 2px 0 1rem;
}
math-element span:not(.single) {
font-style: italic;
}
math-element span.single {
text-align: left;
padding-top: .5rem;
font-style: normal;
}
math-element span + span {
grid-column-start: 2;
text-align: left;
padding: 0 2px;
}
math-element span + span:before {
content: '=';
}
<math-element data-text='["Solution,","Given, f(x) = 3x","g(x) = x + 2","fog(x) = 18","To find: x = ?,","Now,","fog(x) = 18","or, f(x + 2) = 18","or, 3(x + 2) = 18","or, x + 2 = 6","∴ x = 4"]'></math-element>
You don't have to inline the value as a string, as I did, you can simply create the element(s) on the fly and run the forEach directly on the data instead.
If you find CSS grid syntax and logic confusing, you can always create a <table> with <tr> and <td>s, which will give you simpler selectors. Out of principle, I advise against it.
I used <hr>s to mark the end of each "row" (CSS grid requires all cells to be siblings). Instead, you could just nest the row contents into a single element (<div> ?) and hard-code the column widths.
Obviously, the CSS is yours to modify (i.e: remove font-style's, adjust the padding values, etc...).
A final note: if one "row" contains more than one = sign, because of this rule:
math-element span + span {
grid-column-start: 2;
}
spans 2 and 3 in a row (and subsequent, until end of row) will be displayed one below each other, each prefixed with a = sign and aligned with the rest (which is not that bad, IMHO). If you want to change this behavior, you probably want to provide a
math-element span + span + span {
grid-column-start: 3;
}
... rule, and so on. Also you'll need to change grid-template-columns to match:
math-element {
grid-template-columns: auto auto 1fr;
}
...matching the number of "columns".
I have HTML element with text content.
Font is set to sans-serif in CSS.
Text is updated via JavaScript.
Sometimes contains just ASCII characters but, sometimes, includes "➜" character. See following snippet:
var text = document.getElementById("text");
var chars = "A➜";
var i = 0;
function update() {
i=1-i;
text.innerText = "char: " + chars[i];
setTimeout(update, 500);
}
update();
div {
font-family: sans-serif;
background-color: lightgrey;
}
<div id="text" />
This works fine in IE11 but in Chrome the element "wiggles":
It looks like this happens because different font is used to render "➜" character:
Arial—Local file(5 glyphs)
Segoe UI Symbol—Local file(1 glyph)
Is there a simple way to stabilize the height of whole element and position of static part of text?
One way seems to be using "Segoe UI Symbol" for whole element - but I prefer a different font for regular text.
Just add a line-height style to your element:
var text = document.getElementById("text");
var chars = "A➜";
var i = 0;
function update() {
i=1-i;
text.innerText = "char: " + chars[i];
setTimeout(update, 500);
}
update();
div {
font-family: sans-serif;
background-color: lightgrey;
line-height: 1em;
}
<div id="text" />
An easy fix would be to set the line-height in CSS
var text = document.getElementById("x");
var chars = "A➜";
var i = 0;
function update() {
i=1-i;
text.innerText = chars[i];
setTimeout(update, 500);
}
update();
div {
font-family: sans-serif;
background-color: lightgrey;
line-height: 1em;
}
#x {
line-height: 1em;
}
<div id="text">char: <span id="x" /></div>
based on this thread
I am trying to use images in the HTML from the above link. Fiddle is here
body {
margin: 0;
padding: 0;
}
.main {
background: yellow;
overflow: hidden;
width: 100%;
}
.columns {
background: red;
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
height: 120px;
padding: 0 20px;
width: auto;
overflow-x: auto;
}
.columns img{
height:none;
display: block;
}
.columns > p:last-of-type {
margin-right: 20px;
}
Horizontal scrolling works great, but the image gets divided into columns as well. I didn't know that this is even possible. I like it to stay in one part with the height of the column and auto width not with the column width. So that the columns coming after it gets shifted.
I think I find a possible way to realize what I wanted.
Now it uses a bit JS and Jquery. Here is the fiddle.
Main point is to check page.offsetHeight < page.scrollHeight to see if the textfield has overflow. When it has create a new div.
Here is the JS:
$( document ).ready(function() {
$( ".element2" ).each(function( i,obj ) {
if(this.tagName == "IMG"){
$("#paginatedText").append(obj);
}else{
paginateText(obj);
}
console.log(this.tagName);
});
function paginateText(element) {
//console.log(element);
var text = $(element).html(); // gets the text, which should be displayed later on
//console.log(text);
var textArray = text.split(" "); // makes the text to an array of words
createPage(); // creates the first page
for (var i = 0; i < textArray.length; i++) { // loops through all the words
//$( ".element" ).last().append(textArray[i]);
var success = appendToLastPage(textArray[i]); // tries to fill the word in the last page
if (!success) { // checks if word could not be filled in last page
createPage(); // create new empty page
appendToLastPage(textArray[i]); // fill the word in the new last element
}
}
}
function createPage() {
var page = document.createElement("div"); // creates new html element
page.setAttribute("class", "page"); // appends the class "page" to the element
document.getElementById("paginatedText").appendChild(page); // appends the element to the container for all the pages
}
function appendToLastPage(word) {
var page = document.getElementsByClassName("page")[document.getElementsByClassName("page").length - 1]; // gets the last page
var pageText = page.innerHTML; // gets the text from the last page
page.innerHTML += word + " "; // saves the text of the last page
if (page.offsetHeight < page.scrollHeight) { // checks if the page overflows (more words than space)
page.innerHTML = pageText; //resets the page-text
return false; // returns false because page is full
} else {
return true; // returns true because word was successfully filled in the page
}
}
});
I would like to add an arrow (or "triangle") after the current selected row of a html table (to highlight what is selected, rather than using a background color change).
The triangle should be facing left, like this '<'.
I have managed to add a class to the current selected row, and I think the rest can be done in css only, but I haven't been able to do it.
Fiddle: http://jsfiddle.net/j95f8met/
Here is the script to highlight the row:
document.querySelector('table').onclick = highlight;
function highlight(e) {
e = e || event;
var from = findrow(e.target || e.srcElement),
highlighted = /highlighted/i.test((from || {}).className);
if (from) {
var rows = from.parentNode.querySelectorAll('tr');
for (var i = 0; i < rows.length; i += 1) {
rows[i].className = '';
}
from.className = !highlighted ? 'highlighted' : '';
}
}
function findrow(el) {
if (/tr/i.test(el.tagName)) return el;
var elx;
while (elx = el.parentNode) {
if (/tr/i.test(elx.tagName)) {
return elx;
}
}
return null;
}
Here is my CSS:
tr.highlighted td {
background: red;
}
tr.highlighted:after {
border-bottom: 60px solid transparent;
border-left: 60px solid green;
border-top: 60px solid transparent;
height: 0;
width: 0;
float:right;
}
'Content' must fix your problem ;)
content: '';
http://jsfiddle.net/j95f8met/3/
You need to set the content attribute on the :after pseudo-element.
Why this is required you can read below this question: Why do pseudo-elements require a content property?
So, technically, you could also add content: "\003c"; and you will get the character (less-than) <. This can be used to replace the borders you have set to create the triangle.
To style the < character you can then use font-family, color, font-size etc.
To place the < character more appropriate you can work with CSS positioning.
Hope this helps.
I have a div that has the following CSS:
.div_stuff {
width: 830px;
margin: 20px auto;
font-size:22px;
}
How do I prevent the text that goes to the next line to not align left right under the text above but simply become centered on the next line?
Although I'm not sure if I understood what you want to achieve and I can't find a use case for this... Changing the alignment from the second line on would be possible by adding some span tags with javascript/jQuery (DEMO):
$(function() {
var box = $('.div_stuff');
var text = box.text();
var words = text.split(' ');
box.text(words[0]);
var height = box.height();
var chars = 0;
for(var i = 1; i < words.length; i++){
box.text(box.text() + ' ' + words[i]);
chars += words[i-1].length + 1;
if(box.height() > height){
height = box.height();
box.html('<span class="first-line">' + text.substring(0,chars) + '</span><span class="following-lines">' + text.substring(chars+1, text.length)+'</span>');
break;
}
}
});
And set a different alignment to them:
span {
display: block;
}
.first-line {
text-align: left;
}
.following-lines {
text-align: center;
}
I've used that answer for determining auto line breaks.
Add text-align: center to center the text inside. You are centering the div position only.
you can try css3 text justified
http://www.w3schools.com/cssref/css3_pr_text-justify.asp