I have an ASPX web application for my business back-office staff. In one of the back-office modules, I'm using TinyMCE to edit some text before it is saved to a database. The text looks like this:
<p data-mce-style="-webkit-margin-before: 0px; -webkit-margin-after: 0px; font-family: 'Segoe UI'; font-size: 14px; background-color: #f7f7f7;">
<strong>Is</strong>
one of the
<span style="text-decoration: underline;" data-mce-style="text-decoration: underline;">most</span>
brilliant
<span style="background-color: rgb(255, 204, 153);" data-mce-style="background-color: #ffcc99;">ballets</span>
in the
<strong>world</strong>
. "
<em>Sleeping Beauty</em>
" take
<span style="color: rgb(51, 153, 102);" data-mce-style="color: #339966;">us</span>
to an
unchanted
place
</p>
<ul>
<li data-mce-style="-webkit-margin-before: 0px; -webkit-margin-after: 0px; font-family: 'Segoe UI'; font-size: 14px; background-color: #f7f7f7;">with forests,</li>
<li data-mce-style="-webkit-margin-before: 0px; -webkit-margin-after: 0px; font-family: 'Segoe UI'; font-size: 14px; background-color: #f7f7f7;">curses and faries,</li>
</ul>
<p style="text-align: justify;" data-mce-style="text-align: justify;">
with a romantic and lovely
<span style="color: rgb(0, 0, 255);" data-mce-style="color: #0000ff;">song</span>
. A fantastic
<sup>show</sup>.
</p>
A mobile front-end application (developed in Flash by another person) needs to display the text with all styling intact. However, sometimes the application doesn't show anything, and the developer says that this is because Flash doesn't like HTML tags/styles.
I was thinking that we could use a parser of some kind to convert the HTML code into something more suitable for Flash, but I couldn't find anything. I came across these two links, but I don't know anything about ActionScript, so they don't help me much:
AS3 TextField and StyleSheet
StyleSheet AS3
Is there any simple way to convert HTML into ActionScript?
There's no "simple way" unfortunately.
As you've already discovered, the TextField class does support basic HTML and CSS rendering via htmlText and styleSheet properties, but the supported tags and styles are very limited. In some cases you can convert tags (using RegExp or simple string searching) to get close to the original styles.
Additionally, things like data-mce-style is specific to MCE, so you'll have to convert it to something meaningful in HTML.
If you are using AIR you can use HTMLLoader or StageWebView. Both of these classes use a full HTML rendering engine (WebKit or the native web renderer).
Finally, and this may be your best option, in a web browser you can overlay a <div> over the SWF (with wmode=opaque or transparent) and display the HTML in the browser.
Related
Hi i am new to the HTML but i am having this issue where in my pc the font is not working or showing the right font-family but it works on IE or other computer any idea what seems to be the issue? I need to know the Accurate result of my style since i don't have an idea on what my webpage looked like until i presented it on my class
<p style="font-size: 500%;
font-family: Fantasy;
color: white;">
10 Important Computer Personalities<br>
<span style="font-size: 50%;-webkit-text-stroke-width: 2px;">List by: Name</span>
</p>
Here is the result on my Chrome or Microsoft Edge it is showing the Impact Font or what i atleast have expected the result
What i have expected or showing on my PC
And here is the result in other computers/devices or IE
What i get on other device
font-family: fantasy does not load a specific font, fantasy is a special keyword (the other four being serif, sans-serif, monospace, and cursive) that tells the browser to load "any font that is in the fantasy category". You are guaranteed that by using it, different computers may load different fonts. If you want to load a specific font, using a webfont is the only real way to ensure all browsers, on all systems, load the same font.
Font family means a kind of font such as Arial and Nunito，and what your code means is to load any font in the fantasy category
If you want to load a kind of font that exists in the computer, you can use this code:
p {
font-family:"Times New Roman",Georgia,Serif;
}
ps: Geneva font will be used if Times New Roman does not exist.
If you want to load a kind of font in your webpage that did not exist in the computer, you need to put WOFF2 file in your HTML, and this can work:
#font-face {
font-family: 'MyWOFF2';
src: url('The URL of the WOFF2');
}
.website-purpose {
color: green;
font-size: 1.5em;
font-family: 'MyWOFF2';
}
For more information about font-family, you can visit This website
I am currently working on a Kendo UI donut chart in an Angular project.
The chart works great functionally, but the styling of the chart is giving me some trouble.
Right now, the chart keeps switching between two kinds of styles.
This is the first one:
Preferred styling
This is the second one:
Non-preferred styling
These seem to change at random whenever I reload, even when nothing in the code is changed.
I have been trying to find a solution for hours, but can't seem to get anything working.
Here is the code for the chart:
<div *ngIf="isDonutEnabled && pieGraphData">
<kendo-chart class="travelbehaviour-graph-donut-spacing">
<kendo-chart-legend [visible]='false' position="bottom" orientation="horizontal"></kendo-chart-legend>
<ng-template kendoChartDonutCenterTemplate>
<span class="travelbehaviour-graph-donut-center-subtext">CO₂ Uitstoot</span>
<span class="travelbehaviour-graph-donut-center-bigtext">{{pieGraphData.co2}}</span>
<span class="travelbehaviour-graph-donut-center-subtext">g/km</span>
</ng-template>
<kendo-chart-series>
<kendo-chart-series-item *ngIf="includingFlights" [autoFit]=true type="donut" [data]="pieGraphData.pieGraph"
[holeSize]="150" [size]="200" [labels]="donutLabels" categoryField="name" field="contributionIncluding">
<kendo-chart-series-item-labels position="outsideEnd" color="#000" [content]='getLabel'>
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
<kendo-chart-series-item *ngIf="!includingFlights" [autoFit]=true type="donut" [data]="pieGraphData.pieGraph"
[holeSize]="150" [size]="200" [labels]="donutLabels" categoryField="name" field="contributionExcluding">
<kendo-chart-series-item-labels position="outsideEnd" color="#000" [content]='getLabel'>
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
</div>
Here is the relevant CSS:
.travelbehaviour-graph-donut-spacing {
height: 50vh;
width: 50vw;
margin: 0 auto;
}
.travelbehaviour-graph-donut-center-bigtext {
font-family: PublicaSansMedium;
font-size: 50px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #333333;
}
.travelbehaviour-graph-donut-center-subtext {
font-family: PublicaSansMedium;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #333333;
}
I have already tried using ViewEncapsulation.None, which didn't work. I also tried changing the CSS of the graph, but that didn't work either.
The *ngIf variables are a boolean and a data object used to load data into the graph.
So far I have found very little concerning this problem and was wondering if anyone could help me out with this problem - it would be very much appreciated!
EDIT: It's worth noting that this also happens to another chart in my project on the same page: a stacked column chart. This has exactly the same problem as described above.
I'm closing this question since I found a solution for my problem. Apparently, the glass-look is a styling feature that can be turned on or off, with other settings included as well.
More can be found here: https://www.telerik.com/kendo-angular-ui/components/charts/api/Overlay/
This had to be set for every relevant series-item in order to work.
The problem looks like it is random, but it isn't.
I assume you use Google Chrome, because we faced the problem as well.
The problem is that the chart is rendered before your css file is loaded.
This happens in Chrome because js files are cached in memory and css files are cached on disk.
Our current workaround is to to render the chart after all data is loaded (needs mostly longer than 1 second to load the data from the server).
This is probably not a satisfying solution, but I hope you were able to understand the problem a bit better.
We have also opened a Kendo ticket, and I will let you know as soon as we find a better solution.
EDIT:
Kendo support replied that they were not aware of this problem, but they are currently implementing a solution. For the fonts, they recommend that the font should be set via the font property of the the labels of the proper Chart element. They also opened a feature request so set the font globally.
I overview the html with css in chrome, it looks normal as follows:
html:
while pdf looked dislike the same as follows:
pdf:
pdf2:
As you see in pdf2, the font is not bold, but outlined with black color。And my code snippet here:
.title{
font-size: 2em;
color: #4d82bf;
font-weight: bold;
padding-left: 20px;
}
<p class="title">报告书总览 Summary Overview</p>
Does anybody know how to make the html and pdf displayed the same with bold font?
TIP:
without the font-weight font-weight: bold;style, they look the same:
html:
pdf:
After searching a few hours, I found this question Can't change bold text color, a 'black border' remains
which answered by #Bruno Lowagie, the creator of iText. According to the accepted answer, a couterpart bold font(.ttf) file is needed. After adding 'msyhbd.ttf' to the ItextRender, my program worked well! Thanks to #Bruno Lowagie
, and hope this post would help anybody! Results as follows:
I am using a wordpress theme that has a font-type selection for page titles and content body.
I'm using Montserrat for titles and Open-Sans for body.
I've got a few product titles where I need to input the trademark symbol ™ / ™
But the trademark symbol in the titles is coming up as a totally different font that looks like Times New Roman.
Is there a way to apply font-type only to the ™ trademark html symbol entity? Globally?
I tried to use <sub>TM</sub> in titles which sort of works, it doesn't work everywehere, for example it wouldn't work in breadcrumbs.
Yes you can... but it's not really convenient:
#font-face rules have an unicode-range property that you could set to target a single character:
c.onchange = e=> document.body.classList.toggle('amp');
#font-face {
font-family: 'Ampersand';
src: local('Courier');
unicode-range: U+26;
}
body.amp{
font-family: Ampersand, cursive;
}
body{
font-family: cursive;
}
<span>lorem ipsum dolor sit amer & some others</span>
<input type="checkbox" id="c">
But as I said, it's not really convenient, since you have to make it the first font of all your font-family declarations where you want it to apply...
Typically one would use different markup for these and then use CSS to generate the content. For example, instead of
MyCompany™
you might use
MyCompany<i class="symbol symbol-tm" />
And then use CSS
i.symbol {
position: relative;
width: 1.5em;
}
i.symbol.symbol-tm:after {
display: inline;
content: "\2122";
font-family: "Times New Roman";
}
I'm using the latest version of TinyMce,
And when I copy paste some html content from wikipedia, it actually inserts lots of which are not present in the source.
Example, I select the following string from wikipedia:
trained professionals and paraprofessionals coming
From this page: http://en.wikipedia.org/wiki/Health_care
And It has the following source code:
trained professionals and paraprofessionals coming
Note: As we see there are no noob-spaces ( ).
Then when I paste it to the tinymce it produces the following html:
<h3 style="background-image: none; margin: 0px 0px 0.3em; overflow: hidden; padding-top: 0.5em; padding-bottom: 0.17em; border-bottom-style: none; font-size: 17px; font-family: sans-serif; line-height: 19.200000762939453px;"><span style="font-size: 13px; font-weight: normal;">trained </span><a style="text-decoration: none; color: #0b0080; background-image: none; font-size: 13px; font-weight: normal;" title="Professional" href="http://en.wikipedia.org/wiki/Professional">professionals</a><span style="font-size: 13px; font-weight: normal;"> and </span><a style="text-decoration: none; color: #0b0080; background-image: none; font-size: 13px; font-weight: normal;" title="Paraprofessional" href="http://en.wikipedia.org/wiki/Paraprofessional">paraprofessionals</a><span style="font-size: 13px; font-weight: normal;"> coming</span></h3>
Or, as a plain text it would look like this:
trained professionals and paraprofessionals coming together
Which actually breaks my layout because it all goes in one line (as one word).
Any ideas why it does it and how to prevent it?
Whenever you copy some content from websites, it copies the style of the text also. So all you need to do is you should paste the copied content into notepad first, then from there you can again copy the same content and then paste in tinymce.
(Notepad gives you the plain content without any inline style)
First Copy the content in any place ex (Wikipedia, google, etc). Past the all content in Notepad file. The total back links and spaces are deleted after copy the notepad content past the Tiny MCE Editor. It is the better way to use this type.
When copying content from a web page, use View Source in a browser and copy the relevant part from the source and then insert it in “raw mode” (source mode, HTML mode, whatever it is called—I presume TinyMce has got such a mode; if not, get a better tool). To make this easier, in Firefox, you can paint an area and then right-click and select the option of viewing the source of the selection. (Well this might need an add-on like DOM Inspector, I’m not sure.)
It’s possible that TinyMce converts spaces to something else even in “raw” mode. I have seen such things happen in a CMS (spuriously changing normal spaces to no-break spaces), with no explanation found, and I hope I won’t need to use such a CMS ever again.