html2canvas conflicts with bootstrap - html2canvas

If I use html2canvas 0.4.1. The word spacing is ok. But no new line break in textarea. As shown in: https://jsfiddle.net/mdj4epr2/5/
If I use html2canvas 0.5.0 any version. The word spacing is ok. New line break in textarea is ok. As shown in https://jsfiddle.net/mdj4epr2/8/
But after added bootstrap css to html2canvas 0.5.0, the word spacing is wrong.
https://jsfiddle.net/mdj4epr2/9/
Main rendering code is very simple:
html2canvas(main_content, {
onrendered: function(canvas) {
canvas_div.appendChild(canvas);
}
});
Any suggestions?

i think the problem is html2canvas couldn't get font-family "Helvetica Neue" from bootstrap and set the font-family to none.
i can fix this by forcing the element to use font-family without "Helvetica Neue" but still looks good.
<div id="main_content" style="font-family: Helvetica,Arial,sans-serif">
</div>
or you can simply set the font-family and change it back after running html2canvas like this https://jsfiddle.net/mdj4epr2/11/

Related

Rich text editor (tinymce) images - how to disable auto height and width?

We're using Umbraco v7.2.1 to serve what is supposed to be responsive content.
When you add an image from the media library to the tinymce editor, this is the html that is inserted by tinymce:
<img style="width: 500px; height:500px;"
src="/media/1007/jobs-block.jpg?width=500&height=500" alt="undefined" rel="1097" />
I really don't want ANY w x h in the tag or image src.
I have found a couple of posts regarding the tinyMce.config file and the validElements node - i removed the height and width things from the img thing in there but that had no effect.
If you open the Data Type for the Richtext editor in question there is a setting called "Maximum size for inserted images". This is by default set to 500 pixels.
If you set it to 0 it will disable any resizing.
I think you can have your cake and eat it too, no need to restrict editor re-sizing.
Adding the following properties to your img elements: max-width: 100%; height: auto !important; will allow content editors to re-size their images while also making them responsive.
I processed the output. I removed the height and wrap images by a div by javascript and I can fully customize it via css

How do I change the code font size in doxygen?

How do I change the looks of how the source code is presented in doxygen? I mean, when you click the link to view the source code of the file(s) that generated the documentation. I'm interested in changing the font size.
You can use custom CSS to style doxygen output.
As mentioned, you'll need to use custom CSS, which you can do through HTML_EXTRA_STYLESHEET.
To get a CSS template, run:
doxygen -w html header.html footer.html customdoxygen.css
You can then choose out elements from customdoxygen.css that you wish to modify, and add them to your own css file.
The CSS which ultimately informs the font-size of code snippets (fragments), is actually the div.line within:
div.line {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 15px;
...
}

How to use text-overflow:ellipsis with tinymce

I have a master detail type view setup where you can enter data on the right side (detail) and it will show in a summary on the left side (detail). I accomplished this view using CSS and jQuery. All of the data is coming from a mysql database.
The problem is caused by the html tags that tinymce inserts into the textarea. When I try to display it using the text-overflow:ellipsis; CSS it doesn't put in the ellipsis.
CSS:
.OverflowData {
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}
Here is a stripped down jsFiddle with the resulting data with the tinymce html tags added and what happens on the left side.
Now Here is a version where I stripped out the <p> tags and the ellipsis shows properly.
So my question is: is it possible to have the summary and ellipsis show properly in the first case or must I strip out all of the html from the tinymce textarea beforehand?
I am open to other suggestions.
The settings have to be on the immediate parent so this works when added to your sample (note the 'p' in the selector):
.OverflowData p {
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}

ios safari won't display font-face embedded fonts in svg files. any fix?

So I have a SVG file, that contains text elements. Example:
<text transform="matrix(1 0 0 1 195.248 207.165)" fill="#999999" font-family="'LeagueGothic'" font-size="24">Europe</text>
When I specify the font-family to something included in iOS (like Helvetica or Futura), everything works fine. However, once I specify a font included through #font-face, it simply doesn't work on iOS, while it does on desktop Safari, Chrome, Firefox as well as Opera.
Otherwise #font-face fonts work ok throughout the page, except the SVG parts.
Tried including the SVG file as <embed>, <object> and <img>, didn't help. Interestingly, when I try inline SVG (i.e. SVG code directly within HTML), then the fonts are ok, but it doesn't draw anything else form the SVG file.
I am on iOS 4.2. Tried SVG 1.1, 1.1 Tiny, 1.2, etc. all the same.
Is this a bug or am I missing something, please? Thanks.
Sample SVG file here: http://pastie.org/1637291
Your svg sample has no #font-face rule, nor references to any external stylesheets. Maybe a solution could be to include a stylesheet with that definition in the svg file itself.
For example:
<style>
#font-face { font-family: foo; src: url(somefont.svg#theFontElementId) format("svg"); }
</style>
If you are referencing the svg parts with e.g <object>, <embed>, <iframe> or <img> and see the webfont elsewhere on the page then that missing stylesheet thing could be the cause.

Render the presence of a <script> tag in TinyMCE

I managed to get TinyMCE to keep my <script> tag in the source, so it is no longer stripped as an invalid tag. However, in edit mode, it doesn't render anything. The script tag is there in the html view, but it's just a blank line in edit mode.
Instead, I want tinyMCE to render anything instead of nothing. Even if it is just simple text like [here lies a script]. Is this possible? How? I can't get it working for the life of me. Thanks!
You can use stylesheets to style script elements, I would advise trying that in TinyMCE, here's a fiddle so you can see what I mean:
https://jsfiddle.net/plenuM/m9zr1dqw/
script {
display:block;
height:20px;
width:100%;
background:red;
text-align:center;
color:#fff;
overflow:hidden;
}
script:before {
content:"(SCRIPT)";
}
You will want to only import the CSS when TinyMCE is active though, the TinyMCE documentation can assist you with that.
The script tag should act as if on a regular html page.