How can I change the text "image 1 or ? ' - css

How can I change the text "image 1 or 5 ' (in Dutch) or delete it. I use Lightbox-plus-jquery.js in Ligtbox2. I can’t find it in JS or CSS.
Excuse my English ...

I have solved it myself. In the rule ' AlwaysShowNavOnTouchDevices changed to Dutch: 'Figure 1% of 2% ' to ‘afbeelding 1% van 2%’.

Related

Setting css class with variable in Xaringan with remark.js

I often need to change dynamically the font size or other properties for xaringan slides. Instead of defining a lot of different CSS classes I would like to define a general fontsize class and then passing a % value as variable. Something like this https://stackoverflow.com/a/17894116/9032257:
# Header 1
.fontsize50[
- some text
- some text
]
But fontisize50 is not hard coded on the CSS file. Is that possible?
Update
I have tried to use the approach proposed on Remark documentation https://github.com/gnab/remark/issues/72#issuecomment-62225566. I am able to dynamically the font size of a single word but not applying the font-size property to an entire section.
Adding this function to a macro.js file and setting the beforeInit YAML:
remark.macros.fontsize = function (size = "100%") {
var txt = this;
tag = "<span style=" + "'font-size:" + size + "'>" + txt + "</span>";
return tag
};
Then using this:
# Header 1
<!-- This Works -->
Hello ![:fontsize 200%](World)!
<!-- This Not -->
Hello ![:fontsize 200%](
- bullet 1
- bullet 2
- bullet 3
)
Change the fontsize according to the percentage only in the first case. I would like to have the same behavior as having a CSS class:
.font50 {
font-size: 50%;
}
And then using:
Hello
.font50[
- bullet 1
- bullet 2
- bullet 3
]
But I am not able to do this.

How to set vertical text on PHPExcel

How can I set vertical align to the text on PHPExcel
I tried with
$phpExcelObject->getActiveSheet()->getStyle('B2:B5')->getAlignment()->setReadorder(
PHPExcel_Style_Alignment::READORDER_RTL
);
But it didn't work.
I actually have:
THE TEXT
But I want
T
H
E
T
E
X
T
Like the image.
It's not vertical alignment that you want to look at: vertical alignment is whether the content should be at the top/centre/bottom of a cell; nor RTL, which is Right-to-Left. You could perhaps look at text rotation, but that rotates the orientation of the text.
You'll always need to set the row height to automatic and enable wrapping.
$objPHPExcel->getActiveSheet()
->getRowDimension(12)
->setRowHeight(-1);
$objPHPExcel->getActiveSheet()
->getStyle('A1')
->getAlignment()->setWrapText(true);
so that it will expand to the actual size of your text.
Then an option would be to add a new line character after every character in your string before setting the cell value:
$value = "THE TEXT";
$objPHPExcel->getActiveSheet()
->setCellValue('A1', implode("\n", str_split($value)));
I See what your problem is,
I have solution for you , you still using getAlignment()->setWrapText(true); on your code, but you can add variable that fill is "\n" for every value you want it.
For Example :
$n= "\n";
$objPHPExcel->getActiveSheet()->setCellValue('A','T'.$n.'E'.$n.'S'.$n.'T');
$objPHPExcel->getActiveSheet()->getStyle('A')->getAlignment()->setWrapText(true);
result's as bellow:
T
E
S
T
Hope this answer can help you.

div with overflow on the left and left aligned showing the end of the text

trying to set up css doing the following:
Imagine we have two equal parallel divs with text in it:
<div class="xy">Example</div>
<div class="xy">This.is.a.example.of.a.long.Text</div>
The divs are wider than "Example" but less wide than "This.is.a.example.of.a.long.Text".
Now I want to see these texts left-aligned, so that the odd space is behind "Example" on the ride side.
But i also want to use
text-overflow:ellipsis
with the longer text in a way that I will see the end of the text.
So it should look like:
"Example "
"...ample.of.a.long.Text"
How do I do this?
I was just curious to your question and give it a try in java script as follows,
Demo
var maxChar = 20,
dots = '. . . ',
toTrim = $('.toTrim'),
toTrimLength = toTrim.text().length,
getChar = toTrimLength - maxChar;
if(toTrimLength > maxChar){
var newString = dots + toTrim.text().slice(getChar)
toTrim.text(newString);
}
I guess you still need to modify this to suite your requirement.
Also add the same string in title attr to see full text when hovering and if you want to do it even better. change text-overflow on :hover
this article will help you http://html5hub.com/ellipse-my-text/#i.6k1nyg11zqdiar

Last line of a paragraph contains a single word only [duplicate]

This question already has answers here:
Widow/Orphan Control with JavaScript?
(7 answers)
Closed 8 years ago.
A common problem when working with typography in HTML/CSS is something we call "horunge" in Swedish ("widow" in english).
What it is:
Let's say you have a box with a width of 200px and with the text "I love typograpy very much". Now the text breaks and becomes:
I love typography very
much
As a designer I don't want a word bastard (single word / row). If this was a document/PDF etc. I would break the word before very and look like this:
I love typography
very much
which looks much better.
Can I solve this with a CSS rule or with a javascript? The rule should be to never let a word stand empty on a row.
I know it can be solved by adding a <br /> but that's not a solution that works with dynamic widths, feed content, different translations, browser font rendering issues etc.
Update (solution)
I solved my problem with this jquery plugin: http://matthewlein.com/widowfix/
A simple jQuery / regrex solution could look like the following, if you add the class "noWidows" to the tag of any element that contains text you are worried about.
Such as:
<p class="noWidows">This is a very important body of text.</p>
And then use this script:
$('.noWidows').each(function(i,d){
$(d).html( $(d).text().replace(/\s(?=[^\s]*$)/g, " ") )
});
This uses regex to find and replace the last space in the string with a non-breaking character. Which means the last two words will be forced onto the same line. It's a good solution if you have space around the end of the line because this could cause the text to run outside of an element with a fixed width, or if not fixed, cause the element to become larger.
Just wanted to add to this page as it helped me a lot.
If you have (widows) actually should be orphans as widows are single words that land on the next page and not single words on a new line.
Working with postcodes like "N12 5GG" will result in the full postcode being on a new line together but still classed as an orphan so a work around is this. (changed the class to "noWidow2" so you can use both versions.
123 Some_road, Some_town, N12 5GG
$('.noWidows2').each(function(i,d){
var value=" "
$(d).html($(d).text().replace(/\s(?=[^\s]*$)/g, value).replace(/\s(?=[^\s]*$)/g, value));
});
This will result is the last 3 white spaces being on a new line together making the postcode issue work.
End Result
123 Some_road,
Some_town, N12 5GG
I made a little script here, with the help of this function to find line height.
It's just an approach, it may or may not work, didn't have time to test throughly.
As of now, text_element must be a jQuery object.
function avoidBastardWord( text_element )
{
var string = text_element.text();
var parent = text_element.parent();
var parent_width = parent.width();
var parent_height = parent.height();
// determine how many lines the text is split into
var lines = parent_height / getLineHeight(text_element.parent()[0]);
// if the text element width is less than the parent width,
// there may be a widow
if ( text_element.width() < parent_width )
{
// find the last word of the entire text
var last_word = text_element.text().split(' ').pop();
// remove it from our text, creating a temporary string
var temp_string = string.substring( 0, string.length - last_word.length - 1);
// set the new one-word-less text string into our element
text_element.text( temp_string );
// check lines again with this new text with one word less
var new_lines = parent.height() / getLineHeight(text_element.parent()[0]);
// if now there are less lines, it means that word was a widow
if ( new_lines != lines )
{
// separate each word
temp_string = string.split(' ');
// put a space before the second word from the last
// (the one before the widow word)
temp_string[ temp_string.length - 2 ] = '<br>' + temp_string[ temp_string.length - 2 ] ;
// recreate the string again
temp_string = temp_string.join(' ');
// our element html becomes the string
text_element.html( temp_string );
}
else
{
// put back the original text into the element
text_element.text( string );
}
}
}
Different browsers have different font settings. Try to play a little to see the differences. I tested it on IE8 and Opera, modifying the string every time and it seemed to work ok.
I would like to hear some feedback and improve because I think it may come in handy anyway.
Just play with it! :)
There are also CSS widows and orphans properties: see the about.com article.
Not sure about browser support...
EDIT: more information about WebKit implementation here: https://bugs.webkit.org/buglist.cgi?quicksearch=orphans.
Manually, you could replace the space in between with
I've been looking for ways to dynamically add it in. I found a few, but haven't been able to make it work myself.
$('span').each(function() {
var w = this.textContent.split(" ");
if (w.length > 1) {
w[w.length - 2] += " " + w[w.length - 1];
w.pop();
this.innerHTML = (w.join(" "));
}
});
#foo {
width: 124px;
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<span class="orphan">hello there I am a string really really long, I wonder how many lines I have</span>
</div>

Displaying part of text in RichText in bold font

How do you make some parts of spark.components.RichText bold?
In my Flash / ActionScript 3 programm I have been just using htmlText property of a TextField, and set it to 1 2 <b>3</b> - but now I'm trying to port my program to Flex 4.5.
UPDATE:
I'm trying:
myRichtText.textFlow = TextConverter.importToFlow('1 2 3 <s:span fontWeight="bold">4 5</s:span>', TextConverter.TEXT_LAYOUT_FORMAT);
but nothing is displayed. I'd prefer not to use RichEditableText or TextArea.
var str:String=rc.text.toString().substr(2,1);
var str2:String=rc.text.toString().substr(0,2);
str=str2+"<b>"+str+"</b>";
rc.textFlow = TextConverter.importToFlow(str, TextConverter.TEXT_FIELD_HTML_FORMAT);
Rich Text
<s:RichText id="rc" text="123"/>
I tried out this way.. In str you should have your html text in this case 12<b>3</b> You can try it by different methods like link provided by Mitul Golakiya..
hope this will help you...
Here is the solution for it...
You should use TextConverter.importToFlow()...
http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/
Do this :
myRichtText.textFlow = TextConverter.importToFlow('1 2 3 <b>4 5</b>', TextConverter.TEXT_FIELD_HTML_FORMAT);
You may want to use RichEditableText, which has the method setFormatOfRange().

Resources