Twitter Widget ignoring font-size css on iPhone - iphone

My website uses the Twitter widget to grab tweet and uses the "twtr-tweet-text" class to change the font family and size.
Unfortunately, on my iPhone (not on iPad) it seems to ignore the font size completely which causes it to overlap my footer. Looking closer it seems that the font-size is right for the 'reply retweet favourite' section but not for the actual tweet.
http://jshjohnson.com
How would I go about stopping this happening?
Thanks

The twitter widget has code that is setting the font-size in the linked widgit.css. I don't know if you have access to change to CSS within that file, but you can get more specific than the widget.css by targeting the div with your own style. You may have an ugly css rule but it's a quick and dirty fix.
If you can target this more specifically than the widget.css the rule should be applied. The following might work, if I'm targeting the text you had in mind.
div.twtr-tweet-wrap p {
font-size: .75em; /* set whatever font size you want */
...
}
Anyway you have the idea, just find the div you want and get specific. You could check to see what the twitter css is doing here. If you really wanted you could try and match the rule and set the font-size to inherit, so only one font-size rule would have the specific size, to ease future adjustments.

Related

TinyMCE4 icons not displayed when web font downloading disabled

Our product is used by many corporate and government bodies.
Many of them are only allowed use IE and have security policies applied to their IE which they are not allowed adjust.
One such setting is the disabling of downloading web fonts.
We have work around in place to check if the font can be downloaded.
If not, we replace all <i> on the page with <img>.
var haveFont = detectFontIcons();
//Iterate over each icon on the page and replace if necessary
if (!haveFont)
$('[class^="mce-i-"]').each( function(e) {
console.log("Found element = ", this);
// Replace all <i></i> with <img>
....
}
}
This works fine for all our custom Html.
The Problem:
For some reason it will not work for tinyMCE <i> tags.
I have adjusted the class prefeix to allow for the TinyMCE 'mce-i-'.
It finds no elements in the DOM with 'mce-i' even though I can see them using firebug.
I have even set a timeout on the call to do this check, incase it was an issue with the DOM not been fully rendered yet. No luck.
Questions:
1: Any ideas on why no TinyMCE elements are not been found?
2: How can I update tinyMCE to use images directly instead of web fonts?
Thanks
I can't take credit for this, but I found a font-free, custom skin that replaces the fonts with images. I added the skin, updated my init method and it appears to work as I'd hoped.
It can be found here:
- https://pollyshaw.wordpress.com/2014/02/03/a-font-free-skin-for-tinymce-version-4/
- https://bitbucket.org/pollyshaw1/tinymce-4-lightgray-no-fonts-skin

how to make Zurb Foundation non-responsive?

I have made a website with Foundation-master wordpress theme, it looks good but I dont like how its behaving in other browser widths. Is there a way of making it non-responsive, or fixed to a certain width?
Thanks!
Sometimes it's necessary to deactivate the responsive features. For example if, like it happened to me twice already, a website is launching non-responsive and the optimization for smartphones/tablets is added later.
Foundation is an awesome framework even if you take out the responsiveness. The SCSS files are very well structured it comes with a library of very useful UI elements. It's a great choice for responsive and non-responsive sites if you ask me. Some people might also want to streamline their workflow and not jump between different frameworks depending on the project to keep costs low.
Anyways, here my two cents. This deactivated all responsiveness for me:
.row {
width: 62.5rem;
}
And then in the _settings.scss
$small-range: (0, 90em);
$medium-range: (0, 90em);
$large-range: (0, 90em);
This way we're essentially always seeing the large version. As far as I can tell this even works for top bar etc.
Foundation was built to simply create responsive websites.
Beside of the question why you use this framework if you don't want a responsive webseite, it's only possible if you start removing all the media queries in foundation css and by removing the viewport meta tag.
Maybe you should better invest this time to make your webseite responsive so that it also fits on smaller screens and mobile devices.
Although the question is marked as answered, I just wanted to give you a quick hint to prevent the Foundation 4 grid to act responsive, since we had also to deal with that.
In our case (SASS version) setting the width of the <body> element via css to the specific width of the grid and reducing the breakpoint in the SASS variable $small-screen to 1px worked fine.
Try to add a min-width in the body attributes like this:
html,
body {
font-size: 100%;
min-width: <value A>;
max-width: <value A>;
width: 100%;
}
(foundation.css)

get PDF page title

Is it possible to get page title via iText?
The PdfTextExtractor returns all text from the page but I don't know what line is title. Also, title may contain more than one line
I don't know coordinates of title thus I can't use RegionTextRenderFilter
I can try to analyze the font size and take the line(s) with biggest font but TextRenderInfo doesn't provide public access to gs (private final GraphicsState gs)
Any other ideas?
Pages within a PDF don't have titles, they just have text that happens to be bold or in a large font and appears in an area you consider to be "more top" than other pieces of text. It sounds like you know this already, I just needed to be clear on this.
See my post here which shows how to get font information by subclassing ITextExtractionStrategy. My sample targets iTextSharp which is the .Net port of iText but they match pretty much feature-to-feature. The biggest differences is that Java uses getXXX and setXXX whereas .Net just uses XXX for both. Otherwise everything should port just fine.
The moral of the story is that you are going to have to write some arbitrary rules defining what you think of as a "title" and then parse based on those rules.

Is it possible to control top & bottom page margins when using UIMarkupTextPrintFormatter?

I'm trying to use the printing stuff in iOS 4.2 to print from my iPhone app, but I'm having real trouble getting multi-page content to display nicely. As you can see in the attached screenshots of PDFs generated through the iOS printing API, UIMarkupTextPrintFormatter really likes to use a painfully small top-margin when rendering.
Additionally, it doesn't seem to try to split block-elements too nicely either ... it's tough to see in the screenshot but the page break actually occurs halfway through a table row, rather than on a border between rows.
I've tried using the CSS #page directives to specify page boundaries, however iOS Webkit doesn't seem to support these at all.
Does anyone know of any techniques, either in HTML or through the iOS SDK to make these top-margins bigger?
I really don't want to write a custom UIPrintPageRenderer class because I'm trying to give my users the ability to customize their printouts through HTML templates ... going with a custom renderer would almost certainly make this impossible (or really difficult).
Any help is much appreciated!
You're on the right track with UIPrintPageRenderer, but fortunately you don't need to write a custom subclass to do this. All you need to do is instantiate a vanilla UIPrintPageRenderer, set the headerHeight and footerHeight properties, and add your HTML formatter to the renderer using addPrintFormatter:startingAtPage:. It only takes a few extra lines of code, I have posted my method here: Print paper size and content inset

How to change background color of GtkTextView?

How to change background color of GtkTextView? I tried with normal widget set bg functionality but gtk is just changing border color of GtkText View.
Plus can some some please explain me with simple example, that how to change Text Color/Font/Text Size in GtkTextView (Whole text in GtkTextView)?
I fond some examples but they are not working..
Thnaks,
PP.
gtk_widget_override_background_color()
This the GTK 3.x+ way (until GTK 3.16). From
https://developer.gnome.org/gtk3/unstable/GtkWidget.html#gtk-widget-modify-base
"gtk_widget_modify_base has been deprecated since version 3.0 and should not be used in newly-written code. Use gtk_widget_override_background_color() instead"
UPDATE: thegtknerd notes that this method too is now deprecated and it has been since 3.16.
gtk_widget_modify_base()
http://library.gnome.org/devel/gtk/unstable/GtkWidget.html#gtk-widget-modify-base
As of gtk3, I believe the proper way to do that is through CSS. Register a gtk style sheet though GtkCssProvider, then you can write this CSS:
textview text {
background-color: #theme_bg_color;
}
We can see the relevant CSS nodes in the documentation for GtkTextView. In this case I put #theme_bg_color which is an adwaita CSS variable, but you can as well put anything that goes in a usual CSS file, like red or #ff0000.