I've embedded a gist file on my webpage, and it contains some long lines of code which require quite a bit of horizontal scrolling to fully view.
Is there some way to enable word wrap for embedded gist files, so that no horizontal scroll-bar will be present?
You could force word wrapping with CSS.
.gist .blob-code-inner {
white-space: pre-wrap;
}
Related
I'm working on a site which is in Arabic (default text direction is "right to left") and I'm using "Noto Naskh Arabic" font for arabic text and Latin-Modern for latin text which I'm definig by the following css code:
*[dir="ltr"] {
font-size: 20px !important;
font-family:"Latin-Modern";
}
Users may need to enter mathematical equations and I'm using 'Mathjax' for this purpose, the problem is that:
Fractions are displayed without the horizontal line
Equations are displayed with different sizes between arabic and latin paragraph as when I write
some text in english here $\int f(x)dx $
I have come to a slution to the first problem using css
span:lang(ar).MathJax {
direction: ltr !important;
font-family:"Latin-Modern";
}
For the second problem, I need to know if there is a way to automatically specify scale separately for equation which are embedded in Arabic paragraph end those embedded in English paragraph.
It seems like the main issue is that you have to scale in the first place. I'm guessing you did that because MathJax is rendering too large in RTL contexts.
It looks like MathJax is having issues detecting the correct ex-height of the surrounding font. That can be caused by various problems, from fonts not having a correct ex-height to bad CSS interactions; from a quick test it's not the fonts.
As a workaround you can disable font matching in the MathJax configuration
MathJax.Hub.Config({
"HTML-CSS": {matchFontHeight: false},
SVG: {matchFontHeight: false},
CommonHTML: {matchFontHeight: false}
});
You should then also disable the scaling you applied.
We have been using empty anchor tags with css for years to allow hover states with no issues. Here is a sample of the css and html.
a#phone:link, a#phone:visited { width:34px; height:34px; display:inline-block; background:url(phone.png) center top no-repeat; }
a#phone:active, a#phone:hover { background:url(phone-hover.png) center top no-repeat; }
After a lot of digging I finally got cke to stop deleting my empty anchor tags, here is what I did if interested or helpful. I tried to set the removeEmpty but that didn't work until I added protectedSource:
config.contentsCss = '/css/editor.css';
config.protectedSource.push(/<a[^>]*><\/a>/g);
enterCKEDITOR.dtd.$removeEmpty.a = 0; code here
That finally prevented cke from deleting the tag, however the icons still does not appear in the wysiwyg editor. Its all there in code view...
I have stylesheetparser installed and the other styles in the linked css file are displaying correctly, including floating divs that have a width/max-width defined.
When I view the web page in Dreamweaver or a web browser, all the icons are there and working great, but the links/icons don't appear in cke. I can/have added a no-break space, but that adds margin/line-height, and just messes up the alignment design and layout.
What am I missing? Is this expected behavior? I don't think it should be. Is this a bug?
Any thoughts/ideas/help? Thanks!
MediaWiki pictures can be set to a certain size with simple formatting.
However, tables will resize on the fly depending on the browser / screen size.
Can images be made to resize like tables?
(Images inside tables does not work!)
I had the same question and saw from the answers above (now they are below) that you cannot have several pics with different relative sizes. So I wrote a mediawiki extension allowing this: http://mediawiki.org/wiki/Extension:AdaptiveThumb
Dynamic resizing as the browser is resized:
Put the next line at the begining of the css file: .\skins\common\shared.css
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
Each resizable image will be placed inside a <div></div>
<div>[[Image:MyImage.png]]</div>
Read more here: http://www.mediawiki.org/wiki/Help_talk:Images
You could set up a CSS hack.
Mediawiki allows you to include some variables like alt-text, including in that variable a special string such as w100 or resizeable will allow you to target the element with CSS:
img[alt=~w100] { width: 100% !important; height: auto !important; }
Do note that since you are using alt for things it's not meant to be used and !important in the CSS (because MW sets the size as an element style), this is to be avoided as much as possible and meant to be used as last resort.
In short, no, there is no easy way to do this. It could conceivably be done with a bunch of fiddly Javascript, but I'm not aware of anybody having tried this and the implementation would not be trivial.
The short answer is no. The long answer is that you would have to write JavaScript that can determine the user's screen resolution and store it in a cookie.. This would have to be done most likely in common.js so that with the exception of the one in a billion user that has never been to the site and manages to navigate directly to the page with the dynamically sized image (I hope you're not going to put something like that on your main page), that information will already be there when they get to the page. The page could then use those variables to set the size to be {{#expr:(File height * % of screen you want it to take)*(screen height)}}x{{#expr:(File width * % of screen you want it to take)*(screen width)}}px. The host of my wiki says he is in the process of writing a new extension that may be able to do that as part of a request for a <div style="overflow-x: scroll; width: {{#expr:(File width * % of screen you want it to take)*(screen width)}}px;"> section I want to make. If you find something else before me, please update this post so I can see it. Thanks. :D
I have quite large text (font size 28) I'm trying to align vertically in a fixed-height container.
I'm doing this by eye and just setting a margin-top so that it gets to the right spot. However, when in Firefox, I need a margin-top of 20px, in Safari I need like 15px (else it's too far down). I saw that the discrepancy was because in Safari the text element is taller than in Firefox and includes a slight amount of whitespace on top that doesn't show up in Firefox (in Firefox, the top of the text element is exactly when the text starts).
I've tried all kinda of display combinations with line-heights and perhaps adding a width/height for the text and whatnot. Nothing works.
What can I do to make this consistent? I'd hate to use JS but it seems like the only option...
For cross-browser CSS normalization I'd recommend a reset - YUI3 has a good one, Twitter Bootstrap is another good one. It basically sets paddings and margins to 0 so all browsers will behave and only adhere to YOUR css rules and not their own default rules.
For vertically aligning text to containers, if it's a single line of text, use the line-height property, and set it to equal the height of the container.
For example:
CSS:
div {
height:300px;
width: 400px;
line-height: 300px;
font-size:28px;
background-color:#F0F0F0;
}
HTML:
<div>
Some vertically centered text
</div>
Example: http://jsfiddle.net/Djvv7/
You need to apply a css reset. Good practice to use one on all projects. The most famous I know of is: http://meyerweb.com/eric/tools/css/reset/
So I've spent a significant amount of time coding and designing this webpage, and it works perfectly in every browser I've tested it in: IE7, IE9, Firefox, Chrome, Safari. But when I view the webpage in IE8 (and only IE8), the vertical scroll is disabled. The scroll bar is there all right, but it's turned off and I can't use it or the mouse scroll wheel.
I'll post the code for the webpage if I absolutely have to, but first I wanted to see if anyone had ever heard of this happening before or had any initial thoughts.
Okay, I figured this out. If you put height: "100%"; in the html tag of your page's CSS stylesheet, it will break scrolling in IE8, but other browsers will still work. Go figure.
Here is a hack way of getting the scrollbar to work with a height of 100%. Not the best solution but it now scrolls in IE8.
html {
overflow-y: hidden\9;
}
html, body {
height: 100%\9;
}
body {
overflow-y: scroll\9;
}
mainly three things you should see
If you have given style as overflow:hidden
If you have given hight in page percentage.
if you have given float:static.
Fix this issue your IE 8 problem will be solved.
Reason : IE 8 is different than nything else for CBC check IE frist! To the topic, IE 8 hides (only scrolling bar) of scroll bar if you have overflow as hidden, secoundly if you have places hight as 100% IE 8 takes overflow as hidden (can say takes by its own!) n float is element who can go beyond page size if you have it as inherit or relative but static dose not increase dynamicly.
You tried on other IE8 (not your local ie8)? Maybe the problem is in your ie8.
Run with no-addon mode or try to disable all addons (including bars)
Restore advanced settings. Tools -> Internet Options -> Advanced -> Restore Advanced options.
I have also faced this type of problem many times.Scroll bar with IE8 , should not visible in a plain HTML page. So, please check the content inside your <body></body> tag . There may be is some margin or padding tag.
I am using IE8 currently , but there is no such scroll bar is showing. No need to fix the height:100% for HTML or BODY. Please check your page deeply.
If you are using CSS, it may come in handy that you need a reset CSS value so that the page renders properly in IE8. I have provided the link as well as the snippet from http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ . This may help you. If anything this is a nice site to read if you are starting development.
A reset to where it all started…
The concept of CSS Reset was first discussed formally way back when dinosaurs still roamed the internet (2004 to be exact) by Andrew Krespanis. In his article, he suggests using the universal selector (*) at the beginning of your CSS file to select all elements and give them 0 values for margin and padding, like so:
* {
margin: 0;
padding: 0;
}
The universal selector acts like a wildcard search, similar to regular expression matching in programming. Since in this case, the * isn’t preceded by another selector, all elements (in theory – some browsers don’t fully support it) is a match and therefore all margins and paddings of all elements are removed (so we avoid the spacing differences shown in Example 1).
Applying the universal selector margin/padding reset to our earlier example, we now remove all inconsistent spacing between all browsers (in other words, we don’t make the browsers think for us, we show them who’s boss).
Example 2: Applying the universal selector margin/padding reset
But now we don’t have any spacing in between paragraphs, so somewhere below our universal selector reset, we’ll declare the way we want our paragraphs to look like. You can do it a number of ways – you can put margins (or padding) at the beginning or top of your paragraphs, or both. You can use ems as your units or pixels or percentages.
What’s important is that we choose the way the browser will render it. For our example, I chose to add margins (instead of padding) both at the top of the paragraphs and at the bottom – but that’s my choice, you may want to do it differently.
Here’s what I used:
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
Example 3: Declaring a style rule after the universal selector.
Note: The example I used for discussion is a simplified example. If you only used paragraphs for your web pages and no other elements, you wouldn’t want to reset your margins to 0 using the universal selector only to declare a style rule right after it for your paragraph. We’ll discuss this more fully along with other best practices later on down the page.
Shortly thereafter – CSS guru Eric Meyer further built on the concept of resetting margins and paddings. In Eric Meyer’s exploration, he discusses Tanek’s work undoing default HTML styles (which he called undohtml.css) which not only resets margins and padding, but also other attributes like line-heights, font styles, and list styles (some browsers use different bullets for unordered list items).
After many iterations and refinements, we come to a wonderful solution called CSS Reset Reloaded CSS Reset, which not only makes this CSS reset method more accurate than the universal selector method by using higher specificity by naming all possible HTML tags (because the universal selector fails to apply the reset to all HTML tags), but also sets default values for troublesome elements like tables (in which the border-collapse attribute isn’t rendered consistently across browsers).
Of course, there are other methods of resetting your CSS (such as Yahoo!’s YUI Reset CSS which I currently use on Six Revisions), and you can roll your own based on your preference and project needs.
SITE: http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
NOTE: I am kind of new at this, so please bear with me.