473,722 Members | 2,240 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

A FireFox problem: with pre and ex

Summary: when encountering ex as a unit in css, FireFox (and iCab) did
not take into account the font-family.



Sep 13 '06 #1
7 3277
Xah Lee wrote:
Summary: when encountering ex as a unit in css, FireFox (and iCab) did
not take into account the font-family.


The ex unit of length is the HEIGHT of a lower-case x. The font used to
determine this unit is that of the element itself (unless the font-size
property is specified, in which case the font of the parent is used).
Here, your page uses the font of the <preelement.

In some fonts, the height of the lower-case x is less than its width.
In Courier New (often used as the monospaced font within the <pre>
element), the height of the lower-case x -- defining the ex unit -- is
between 85% and 90% of the width. Thus, 70 characters in a <pre>
element will require more than 70ex if viewed with Courier New.


David E. Ross

Concerned about someone (e.g., Pres. Bush) snooping
into your E-mail? Use PGP.
See my <http://www.rossde.com/PGP/>
Sep 14 '06 #2
Emacs and HTML Tips

Xah Lee, 2006-09-19

My website, XahLee.org, has over 3000 html pages as of today. About a
thousand pages are mirrors of Classic Literatures or manuals (e.g.
elisp manual at 850+ pages). These pages are semi-automatically
generated by scripts. The other 2000 or so pages are manually created
with emacs.

This page provides some tips about using Emacs with HTML. If you find
this page incomprehensibl e, please first be familiar with: Emacs

In emacs, when you open a file ending in “html”, it'll
automatically open in html-mode.

First of all, put the following code in your emacs init file. (usually
at “~/.emacs”)

; do highlight selection
(transient-mark-mode t)

; turn on syntax highlighting
(font-lock-maximum-decoration 2)

; highlight matching parens.
(show-paren-mode t)

; when there is a selection, delete key deletes the region instead of
just a char.
(delete-selection-mode t)

Except the last one, the others can be found under the menu named
“Options”. If you are using the menu, be sure to also use
“Options → Save Options” so that these are turned on the next
time you start emacs.

Q: How to insert a tag?

A: html-mode provides many shortcuts to insert tags. Here's a list of
tags you can insert and their keyboard shortcuts and command names.

<h1 C-c 1 html-headline-1
<h2 C-c 2 html-headline-2
<p C-c RET html-paragraph
<hr C-c C-c - html-horizontal-rule
<ul C-c C-c u html-unordered-list
<li C-c C-c l html-list-item

For a complete list of shortcuts, do “M-x html-mode”, then “C-h
m” to see the list.

Q: How to close a tag?

A: Place your cursor at the place where you want to insert the closing
tag, then press “C-c /”.

Q: How to delete a tag?

A: Put your cursor on or inside the tag, then press C-c DEL. This will
delete both the beginning and ending tags. Very convenient.

Q: How to make the cursor jump to the end of the enclosing tag?

A: C-c C-f. Also, to move to the beginning of a tag pair, do C-c C-b.
The f is for forward, and b for backward.

Q: How to insert my custom tag?

A: Put the following code in your emacs init file. Then, can press 5 on
the keypad, and your custom tag will be inserted, and your cursor point
will be placed in between them.

(global-set-key [kp-5] 'insert-p)

(defun insert-p ()
"inserts HTML markup <p></p>."
(insert "<p>\n</p>")
(backward-char 5)

You can change the string in the above code so that it will insert
another tag that you use frequently, or even a text template, such as
headers and footers. You can also change the keyboard shortcut for
this. For example, you can have the F1, F2, F3... etc function keys
each one inserting a different tag for you.

For how to change the keyboard shortcut, see Defining Your Own Keyboard

Q: How to generate a link?

A: Press C-c C-c h (html-href-anchor). Emacs will then ask you to type
a url, then insert it with the closing “</a>”, with your cursor
placed before it so that you can type the link text.

Alternatively, you can place the following lisp code in your emacs init

(defun wrap-url ()
"Make thing at cursor point into a html link.\n
Example: http://wikipedia.org/
<a href=\"http://en.wikipedia.or g/\">http://wikipedia.org/</a>"
(re-search-backward "[\n\t ()]" nil t)
(looking-at "[\n\t ()]?\\([^\n\t ()]+\\)")
(let (
(p1 (match-beginning 1))
(p2 (match-end 1))
(url (match-string 1))
(delete-region p1 p2)
(goto-char p1)
(insert "<a href=\"" url "\">" url "</a>" )

(add-hook 'html-mode-hook
(lambda ()
(define-key html-mode-map "\M-5" 'wrap-url)

With this code, pressing M-5 will automatically make the url your
cursor is on into a link.

Q: How to do a inline image?

A: Press C-c C-c i (html-image). Alternatively, you can place the
following into your emacs init file.

(defun tag-image ()
"Replace an image file name at point with an HTML img tag.
eg: x.jpg became <img src=\"x.jpg\" alt="" width=\"123\"
height=\"456\"> ."
(let ((imgName (thing-at-point 'filename))
(bounds (bounds-of-thing-at-point 'filename)))
(delete-region (car bounds) (cdr bounds))
(let ((image-size
(let ((ximg (create-image (concat default-directory
(image-size ximg t))))
(let ((width (number-to-string (car image-size)))
(height (number-to-string (cdr image-size))))
(insert "<img src=\"" imgName "\" "
"alt=\"\" "
"width=\"" width
"\" "
"height=\"" height

(add-hook 'html-mode-hook
(lambda ()
(define-key html-mode-map "\M-4" 'tag-image)

With this code, pressing M-4 while in html-mode will make the url or
relative path into a inline image, with “alt” and “height” and
“width” attributes.

Q: How to wrap a tag around the word at the cursor point?

A: put the following in your emacs init file.

(defun wrap-text (aa bb)
"Wrap strings aa and bb around a word or region."
(if (and transient-mark-mode mark-active)
(let ((e1 (region-beginning)) (e2 (region-end)))
(kill-region e1 e2)
(insert aa)
(insert bb)
(let ((tt (thing-at-point 'word)))
(skip-chars-backward "^ \t\n,.;?:!<>\' ’“”")
(delete-char (save-excursion (skip-chars-forward "^
\t\n.,;?:!<>\' ’“”")))
(insert aa tt bb) )
(defun wrap-span-xb ()
"Wrap a HTML span around a word or region."
(wrap-text "<span class=\"xb\">" "</span>")

With the above code, “M-x wrap-span-xb” will wrap a <span
class="xb"and </spanaround the word your cursor is on. You can
change the text so that you can have different commands for tag wraps.
You can also make them into a keyboard shortcuts so that different
press of keys will wrap different tags around the word. (such as, bold,
italic, or any css class or style).

For how to define keyboard shortcuts, see Defining Your Own Keyboard

Q: How to find-replace a region with some text?

A: If you have a need to replace several pairs of characters, you can
define a lisp function that does this easy on a region. For example,
place the following in your emacs init file:

(defun replace-string-pairs-region (start end mylist)
"Replace string pairs in region."
(narrow-to-region start end)
(lambda (arg)
(goto-char (point-min))
(while (search-forward (car arg) nil t) (replace-match (cadr
arg)) )
) mylist

(defun replace-greek (start end)
"Replace math symbols. e.g. alpha to α."
(interactive "r")
(replace-string-pairs-region start end '(
("alpha" "α")
("beta" "β")
("gamma" "γ")
("theta" "θ")
("lambda" "λ")
("delta" "δ")
("epsilon" "ε")
("omega" "ω")
("Pi" "π")

With the above code, you can select a region, then press M-x
replace-greek, and have all greek letter names replaced by their
letters. This will be handy when you write a lot math. You can bind
this command to a Keyboard Shortcuts for easy operation.

Also, you can change the code to make it replace other strings. For
example, the following are required:
→ &gt;
< → &lt;
& → &amp;

The following, changing html entities to actual unicode characters
makes the html source code more elegant and readible.

&ldquo; → “
&rdquo; → ”
&eacute; → é
&copy; → ©

Q: How to switch to browser and preview?

A: In html-mode, do C-c C-v. You can also get a textual preview by
pressing C-c TAB, which will hide all the tags. Press C-c TAB again to
show tags.

This post is archived at:


Sep 19 '06 #3
Fuck off
Sep 19 '06 #4
"Viper" <ve****@gmail.c omwrites:
Fuck off
Well that's not very polite, is it?


Jesse Alama (al***@stanford .edu)
Sep 19 '06 #5
Xah Lee wrote:
Emacs and HTML Tips
Who cares about Emacs?

Show me how I can do this nifty stuff in edlin!

=============== ===
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
js*******@attgl obal.net
=============== ===
Sep 19 '06 #6
Jerry Stuckle wrote:

Xah Lee wrote:
>Emacs and HTML Tips

Who cares about Emacs?

Show me how I can do this nifty stuff in edlin!
what about in vi and vim?

Dancin' in the ruins tonight
Tayo'y Mga Pinoy
Sep 19 '06 #7
This is a fantastic resource, I could spend all day on here Xah Lee.


Sep 20 '06 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

by: Geoff | last post by:
When trying to focus a field in Firefox, I get the following error: Error: " nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: file:///C:/Documents%20and%20Settings/Edd/Desktop/test.html :: valText :: line 24" data: no] Source File: file:///C:/Documents%20and%20Settings/Edd/Desktop/test.html Line: 24 Anyone have any ideas as to why this is happening?
by: Howard Kaikow | last post by:
Yesterday, I decided to try Firefox. I've encountered a behavior that is either a bug in Firefox or a bug in my Javascript code. I'll try to explain the problem, hoping that this newsgroup can (in)validate my Javascript code. First, I'll describe the purpose of the Javascript code. I often have a need to post a URL to something at my own web site, e.g., http://www.standards.com/Sorting/SortPerformanceComparison-Description.html. It is...
by: TJS | last post by:
I am finding that the serverside requiredvalidator doesn't fire in the firefox browser, and user request proceeds through to my updateProfile method. Validation is working correctly in the IE browser. Anyone seen this problem or have any ideas why this might be occurring ?? (I have web.config browsercaps updated from http://slingfive.com/ ) code: =========
by: Mark Olbert | last post by:
The doPostBack javascript functioning is not submitting the page when called by linkbuttons (or an autopostback checkbox, for that matter). I'm aware of a problem with Netscape browsers and the postback code, but I have a workaround for that installed (and it looks like the code generated by ASP.NET when it renders the page does the same thing, namely, setting document<). However, the problem still exists under firefox. Has anyone come...
by: dsimmons | last post by:
On my website http://seasidequilters.blogspot.com/ I'm having a problem that someone thinks might be associated with Firefox browsers. I'm hoping to find someone in this forum that might be willing to check my website with Firefox. Sounds like I might have a float problem/div problem that is visible to Firefox users only Here is my problem: >From my PC and majority of viewers of my webpage they see the Flickr badge (photos) on the...
by: petermichaux | last post by:
Hi, I'm hoping for a reason I'm wrong or an alternate solution... I'd like to be able to dynamically include some javascript files. This is like scriptaculous.js library but their solution is broken in Firefox on OS X. What happens with the Scriptaculous library is this In the html document the author only has to include one line
by: Giggle Girl | last post by:
Hi there, I am having a problem with the behavior of Firefox, where lefthand column content is not resized properly after it is "collapsed" and then "re-expanded". An online demo is available here: http://s161149005.onlinehome.us/DEMOS/FF/RESIZE_PROB/main/frameset.asp It works fine in IE 6, but in Firefox, it is broken. Specifically, when the page/frameset first loads in either browser, it looks correct. But when you click the...
by: minnesotti | last post by:
Hi there, I subscribed to a photographic pictures-hosting website which is heavy on JavaScript. My preferred latest browser Mozilla Firefox does not work with it -- no pictures are displayed and no buttons react to clicking. The website's helpdesk says it should work with Firefox, and could not offer any more advices. The JavaScript Console shows that there are numerous errors occuring. It looks like the web browser does not recognise...
by: Carlos Mendona | last post by:
Has anyone managed to get ClickOnce to work with Firefox? It seems to me that it still has the same issues VS 2K5 had. I appreciate any comments or tips.
by: SAL | last post by:
Hello, I did google this issue and found some stuff related to BrowserCaps section of either web.config or machine.config but it didn't work. It seems that most pages in my webapp are okay but a couple of the Firefox is munging up. So, on my information page there is a gridview in the content section of the page. The masterpage contains searching capabilities for the gridview. The masterpage has controls contained in a panel control,...
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main usage, and What is the difference between ONU and Router. Lets take a closer look ! Part I. Meaning of...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development projectplanning, coding, testing, and deploymentwithout human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.