I have a .ttf font file I created. I got all the capital characters, but not the lowercase. Is there a tool or easy way I could make all the lowercase letters the same as capital?
Example: The font should display "hello" as "HELLO"
If that is not possible is there a way I can do this with HTML/CSS?
Sure, you can add CSS rule:
body {
text-transform: uppercase;
}
#DominatorX According to your answer, you can try something like this:
var allDomElems = $('body *'),
helper;
allDomElems.each(function () {
helper = $(this).text();
helper = helper.toUpperCase();
if($(this).children().length === 0) {
$(this).text(helper);
}
});
This doesn't work in all cases, so you'll have to debug the script.
I am unsure how to convert cases in HTML, CSS, or font files. There is a method in JavaScript that can convert strings though.
("string").toUpperCase(/*Enter substring value, by default it converts the whole string*/);
A similar method is used for "lowercasing":
("string").toLowerCase();
You could input the HTML content into JavaScript to convert the cases, then document.write them back out onto the page.
Related
I'm a bit stuck. I have scraped a website and would now like to convert it into markdown. My html looks like this:
Some text more text, and more text. Some text more text, and more text.
Once in a while <span class="bold">something is bold</span>.
Then some more text. And <span class="bold">more bold stuff</span>.
There are html to markdown modules available, however, they would only work if the text <b> looked like this </b>.
How could I go through the html, and everytime I find a span which is supposed to bold something, turn this piece of the html into bold markdown, that is, make it **look like this**
Try this one https://github.com/domchristie/to-markdown, an HTML to Markdown converter written in JavaScript.
It can be extended by passing in an array of converters to the options object:
toMarkdown(stringOfHTML, { converters: [converter1, converter2, …] });
In your case, the converter can be
{
filter: 'span',
replacement: function(content) {
return '**' + content + '**';
}
}
Refer to its readme for more details.
Notepad++ is an open-source editor that supports regex. This picture shows the basic idea.
You know how to use an editor to find and replace strings. In an editor like Notepad++ you can look for string patterns and replace parts of the patterns and keep what's left. In your case, you want to find strings that are framed by HTML markup. Here the regex in the 'Find what' edit box displays that, with the special notation ([^<]*) meaning save zero or more of any character other than the '<' for use in a replacement string. The 'Replace with' edit box says used what was saved (as \1) in the expression **\1** which gives you what you prefer to have in the text file. It remains to click on 'Replace all'.
To be able to do this you need to install Notepad++ and learn some basic Perl regex. To get this dialogue box click on Ctl-H. Of course, if you get it wrong there's always Ctl-Z.
I want to achieve the following in css. How do i do it in a cross browser way?
url('../img/icons/' + attr('type') + '_10.png')
I don't think you can. In the content property you can "concatenate" just by separating with a space, but in other places I don't think there is such a feature. Which is a shame.
You'll probably be best off specifying this style in a style attribute whenever the type attribute is used.
CSS performs concatenation without using any operator (e.g. +, &, etc). Keep your strings in quotes combine the strings, attr, var, etc into one line.
Examples:
url('not/very' '/useful/concatenation'); // not/very/useful/concatentation
url('../img/icons/' attr('type') '_10.png'); //../img/icons/${type}_10.png
url(attr('href') '#hash'); // https://${href}/#hash
url(var(--hello) ' world'); // Hello World
No, you can't do this in plain CSS because the CSS language hasn't control structures or anything like that wich will allow you to dinamically generate CSS code.
Instead, you can use a javascript solutions or a solution based on CSS variables coded in PHP.
You can't do dynamic string interpolation in the way that you're suggesting, but if you have a limited number of possible values for the [type] attribute, you could create styles for each one:
.your .selector[type="foo"] {
background-image: url('../img/icons/foo_10.png');
}
.your .selector[type="bar"] {
background-image: url('../img/icons/bar_10.png');
}
.your .selector[type="baz"] {
background-image: url('../img/icons/baz_10.png');
}
If you've got an unreasonable number of types, then you'll probably need to come up with a better solution than I've listed here.
I need to convert the HTML entity characters to their unicode versions. For example, when I have &, I would like just &. Is there a special function for this or do I have to use the function replace() for each couple of HTML Entity character <--> Unicode character?
Thanks in advance.
Even though there's no DOM in Apps Script, you can parse out HTML and get the plain text this way:
function getTextFromHtml(html) {
return getTextFromNode(Xml.parse(html, true).getElement());
}
function getTextFromNode(x) {
switch(x.toString()) {
case 'XmlText': return x.toXmlString();
case 'XmlElement': return x.getNodes().map(getTextFromNode).join('');
default: return '';
}
}
calling
getTextFromHtml("hello <div>foo</div>& world <br /><div>bar</div>!");
will return
"hello foo& world bar!".
To explain, Xml.parse with the second param as "true" parses the document as an HTML page. We then walk the document (which will be patched up with missing HTML and BODY elements, etc. and turned into a valid XHTML page), turning text nodes into text and expanding all other nodes.
In Javascript, (I assume that's what you're using), there's no builtin function, but you can assign the content to an html tag and then read the text out. Here's an example with jQuery:
function htmlDecode(value){
return $('<div/>').html(value).text();
}
Note that the tag does not need to actually be attached to the DOM. This just creates a new tag, reads out its contents, and then throws it away. You can accomplish something very similar in vanilla Javascript with just a few extra lines.
I have a strange problem:
In the database, I have a literal ampersand lt semicolon:
<div
whenever its printed into a html textarea tag, the source code of the page shows the > as >.
How do I stop this decoding?
You can't stop entities being decoded in a textarea since the content of a textarea is not (unlike a script or style element) intrinsic CDATA, even though error recovery may sometimes give the impression that it is.
The definition of the textarea element is:
<!ELEMENT TEXTAREA - - (#PCDATA) -- multi-line text field -->
i.e. it contains PCDATA which is described as:
Document text (indicated by the SGML construct "#PCDATA"). Text may contain character references. Recall that these begin with & and end with a semicolon (e.g., Hergé's adventures of Tintin contains the character entity reference for the e acute character).
This means that when you type (the invalid HTML of) "start of tag" (<) the browser corrects it to "less than sign" (<) but when you type "start of entity" (&), which is allowed, no error correction takes place.
You need to write what you mean. If you want to include some HTML as data then you must convert any character with special meaning to its respective character reference.
If the data is:
<div
Then the HTML must be:
<textarea><div</textarea>
You can use the standard functions for converting this (e.g. PHP's htmlspecialchars or Perl's HTML::Entities module).
NB 1: If you were using XHTML[2] (and really using it, it doesn't count if you serve it as text/html) then you could use an explicit CDATA block:
<textarea><![CDATA[<div]]></textarea>
NB 2: Or if browsers implemented HTML 4 correctly
Ok , but the question is . why it decodes them anyway ? assuming i've added & , save the textarea , ti will be saved < , but displayed as < , saving it again will convert it back to < (but it will remain < in the database) , saving again will save it a < in the database , why the textarea decodes it ?
The server sends (to the browser) data encoded as HTML.
The browser sends (to the server) data encoded as application/x-www-form-urlencoded (or multipart/form-data).
Since the browser is not sending the data as HTML, the characters are not represented as HTML entities.
If you take the data received from the client and then put it into an HTML document, then you must encode it as HTML first.
In PHP, this can be done using htmlentities(). Example below.
<?php
$content = "This string contains the TM symbol: ™";
print "<textarea>". htmlentities($content) ."</textarea>";
?>
Without htmlentities(), the textarea would interpret and display the TM symbol (™) instead of "™".
http://php.net/manual/en/function.htmlentities.php
You have to be sure that this is rendered to the browser:
<textarea name="somename"><div</textarea>
Essentially, this means that the & in < has to be html encoded to &. How to do it will depend on the technologies you're using.
UPDATE: Think about it like this. If you want to display <div> inside a textarea, you'll have to encode <> because otherwise, <div> would be a normal HTML element to the browser:
<textarea name="somename"><div></textarea>
Having said this, if you want to display <div> inside a textarea, you'll have to encode & again, because the browser decodes HTML entities when rendering HTML. It has nothing to do with your database.
You can serve your DB-content from a separate page and then place it in the textarea using a Javascript (jQuery) Ajax-call:
request = $.ajax
({
type: "GET",
url: "url-with-the-troubled-content.php",
success: function(data)
{
document.getElementById('id-of-text-area').value = data;
}
});
Explained at
http://www.endtask.net/how-to-prevent-a-textarea-element-from-decoding-html-entities/
I had the same problem and I just made two replacements on the text to show from the database before letting it into the text area:
myString = Replace(myString, "&", "&")
myString = Replace(myString, "<", "<")
Replace n:o 1 to trick the textarea to show the codes.
replace n:o 2: Without this replacement you can not show the word "" inside the textarea (it would end the textarea tag).
(Asp / vbscript code above, translate to a replace method of your language choice)
I found an alternative solution for reading and working with in-browser, simply read the element's text() using jQuery, it returns the characters as display characters and allows me to write from a textarea to a div's innerHTML using the property via html()...
With only JS and HTML...
...to answer the actual question, with a bare-minimal example:
<textarea id=myta></textarea>
<script id=mytext type=text/plain>
™
</script>
<script> myta.value = mytext.innerText; </script>
Explanation:
Script tags do not render html nor entities. By storing text in a script tag, it will remain unadultered-- problem is it will try to execute as JavaScript. So we use an empty textarea and store the text in a script tag (here, the first one).
To prevent that, we change the mime-type to text/plain instead of it's default, which is text/javascript. This will prevent it from running.
Then to populate the textarea, we copy the script tag's content to it (here done in the second script tag).
The only caveats I have found with this are you have to use JavaScript and you cannot include script tags directly in it.
TinyMCE color formating is putting in to span tag,
now I need when ever user change color for a text add
one extra character
(for those who may wonder way I need this, read this: Inserting HTML tag in the middle of Arabic word breaks word connection (cursive))
so this is how TinyMCE normaly format text:
<p><span style="color: #ff6600;">forma</span>tings</p>
this is how I need to be:
<p>X<span style="color: #ff6600;">forma</span>tings</p>
so before any span I need to add one extra character.
I was searching throug TinyMCE source but I couldn't find where it assembly this.
I totaly understand your need for a word-joiner.
Depending on the browser you might be able to insert this character using a css-pseudo element - in this case before: http://www.w3schools.com/cssref/sel_before.asp
Your tinymce content css (use the tinymce init setting content_css) should contain the following:
body span:before {
content:'\2060'; // use '\00b6' to get something visible for testing
}
UPDATE: Approch2:
You can do this check to enter your word joiners:
var ed = tinymce.get('content') || tinymce.editors[0];
var span = $(ed.getBody()).find('span:not(.has_word_joiner)').each(function(index) {
ed.selection.select(this);
ed.execCommand('mceInsertContent', false, '\u2060<span class="has_word_joiner">'+this.innerHTML+'</span>'); // you might want to add the formerspan attributes too, but that is a minor issue
});
You might need to call this using an own plugin on special events.