Bridge Tools Guide

When you launch The Bridge Tools, a page is displayed with a toolbar centered at the top and two large rectangles with the titles “Display” and “Raw HTML for the Above”. When you use one of the tools to create a bridge diagram, the diagram is displayed in the first rectangle and the HTML that generates it in the second. You insert a diagram by a copy-and-paste of the HTML into your blog post. The editor you use must allow HTML to be inserted or have a “text mode” that does.


If you examine the tool-bar, you will see that there are actually two sets of buttons separated by a larger space between them. These are discussed more or less in order, left to right.

Each of the bridge tools displays a dialog so the information associated with the diagram you want to insert can be entered. They all have a button that looks like the one to the right. Clicking it actually causes the diagram to be generated and displayed along with its HTML. We call this the “Insert Diagram button”. From now on, we will talk about the diagram being inserted into your blog post, even though it takes you a couple of steps.

Inserting Auctions

There are two types of auctions that can be inserted: a full-auction showing all four table positions and an un-contested auction showing the auction of one pair of players. In either case, when you click on the appropriate Insert Auction button, a dialog will be displayed that allows you to enter the information to be shown in the resulting diagram.

Here is what the dialog for a full-auction looks like:

As you can see, there are several parts to this dialog. There are three selections that you can make that affect how the diagram will be displayed in your post.

  • Choose whether the diagram should be centered horizontally in the post or whether it should be displayed on the left so that you can enter text to be displayed on the right. We usually say that the text will be allowed to wrap around the diagram. There will be a similar choice you can make in all the Bridge Tool dialogs.
  • Select who the dealer (“Dlr:”) is. This does not really affect the display in your post, but will change where the first call in the auction will occur. If you have already entered some calls, those in the first row to the left of the dealer will be reset to a dash. In any case, the call in the first row corresponding to the dealer will be highlighted.
  • Select the vulnerability (“Vul:”) for the deal. The appropriate directions will have their backgrounds set to white (not vulnerable) or red (vulnerable).

Note the “Bidding Box” in the right-hand side of the above dialog. When you click on a call (or the dash or question mark), it will be inserted into the auction diagram. You can see a representation of the auction diagram in the left-hand side of the above dialog. Additionally, the highlighting will change from the call you just entered into the auction diagram, to the next call. If necessary, another row will be automatically added to the auction diagram.

Suppose we start with the above dialog and, in turn, click 1NT, Pass, 2C, Dbl. The resulting representation of the auction diagram will change so it looks like this:

The calls we clicked on were inserted sequentially into the auction diagram. As we clicked on each, the highlighting moved to the next call. After we clicked “Dbl”, it was inserted, an additional row was added to the diagram and the highlighting was advanced.

Suppose at this point we realized we clicked on the wrong call in the bidding box. We had meant to click on 2D (transfer to hearts), not on 2C (Stayman). What do we do? Simple enough, move the cursor over the 2C call and click (left-click). The highlighting will be moved to the 2C call as illustrated below.

Now we just click on the 2D call in the Bidding Box to change the diagram as shown below.

Now we could click on the dash under 1NT and continue entering the auction or we could click on “Dbl” in the bidding box (it is closer to where we have the mouse pointer) to achieve the same result.

Supposing we have an auction where a number of the calls were conventional and we wanted to discuss them in our post. We have two choices:

  • Enter the auction as above and click the Insert Diagram button (it is immediately below the Bidding Box in the dialog illustrated above). This inserts the diagram and we can then discuss the auction and the conventional calls in the text.
  • Annotate the auction diagram.

You annotate a call by clicking on the text-entry area just above the Bidding Box and typing in an explanation. Before you click on it, the text-entry area contains “Optional annotation here.”, but that is cleared when you click on it. You then click on a call in the Bidding Box. It is important that you enter the annotation before clicking on the call to enter it into the auction diagram. What will happen is that an annotation area will be be shown below the auction and the annotation inserted into it. If the annotation area is already visible, the new annotation will simply be added after the last of the existing annotations. The call will be marked with a reference to the annotation.

Let us see an example of a full-auction with the dealer and vulnerability set, and some of the calls annotated. Remember, you do not have to use the annotation feature if you do not want to. It is your choice.

As with the need to change a call that was illustrated above, the same thing may occur when you are entering an auction that has annotations. You make your changes the same way. You click on a call so that it becomes highlighted and then select the substitute call from the Bidding Box. Before clicking on the call in the Bidding Box, you can enter an annotation if desired.

There are several things that may change, including whether a call is annotated or not. We could, for example, remove the annotation on the 2D bid in the diagram to the left, by clicking on it to highlight it and then clicking 2D in the Bidding Box (without having entered an annotation in the annotation area). When you do that (replace an annotated call by one that is not annotated), the annotation is removed from the annotation area below the auction diagram. If that results in there being no annotations left, the annotation area is removed.

The cross-reference numbers are not resequenced and the annotations are not re-ordered in the annotation area (it is a bit awkward to do that in the dialog); however, when the diagram is inserted into your post, they are re-numbered and the order of the annotations in the annotation area is changed to correspond to the actual auction. If you replace an annotated call by another that is also annotated, the reference number will be retained and the annotation in the annotation area will be replaced by the new one (that was easy to do!).

Non-competitive auctions are similar to full-auctions. There are two major differences:

  • Only two positions are shown. This is a familiar way of showing non-competitive auctions — it saves having to enter all those passes and results in a clearer explanation.
  • If there is an annotation area, it is separated slightly from the auction. In a “centered” diagram it is horizontally centered under the auction (it would look silly butted right up to the auction as it is wider), in a “left” diagram, it is shown to the right of the auction and text is not wrapped around the diagram, but continues below it, just as in the centered version.

Inserting Hands

There are six types of hand diagrams that can be created using the Bridge Tools. From left to right in the Bridge Tools tool-bar, those are:

  • A single hand
  • A full deal
  • A pair of North-South hands
  • A pair of West-North hands (for a defensive problem)
  • A pair of North-East hands (for a defensive problem)
  • A pair of East-West hands

Because it is has an interesting side-effect, inserting a full-deal diagram will be discussed first. That side-effect is designed to make your blog-writing easier. When you use the Bridge Tools to create a full-deal diagram, the data you enter in the dialog is “remembered”. In fact, unless you delete “cookies” in your browser (or have them disabled), the data for the last full-deal diagram you created will be remembered across browser sessions. More on this later.

Since the full-deal diagram has a lot of information that can be entered, there is a second description of it that goes into more detail and shows images of the various drop-down lists: Full Deal Diagram

When you click on the Insert Full-Deal button, a dialog similar to the one at the left will be displayed.

You choose whether you want text to wrap around the diagram or for the diagram to be horizontally centered. The button below the representation of the full-deal diagram is the Insert Diagram button. Click it when you are finished entering data and want the diagram to be generated and inserted into your post.

Other than the names of the players and the actual cards in each hand, there are four other, optional pieces of information. Any of those four that have no data set, will not be displayed in the generated diagram.


  • The board number — click in the text area to the right of “Board:” and enter it.
  • Vulnerability — click on the little downward pointing arrow to the right of “Vul:” to see a selection list. If you do not set it, the diagram will be displayed as if no one is vulnerable.
  • Dealer — click on the little downward pointing arrow to the right of “Dlr:” to see a selection list.
  • Lead — in the center of the diagram representation, below the word “Lead”, are two selection lists. Clicking on the little downward pointing arrows will display a list from which a choice may be made. The first selection list is for the suit of the lead and the second for the card.

The “directions” are the single capital letters above the hands. The “North”, “South”, etc., are the “Player Names”. You can click on a player name (or double-click to select a whole word) and change it. This means you can associate actual player names with hands. Keep in mind that only about the first 11 characters will be visible in the generated diagram.

Tip: You can use the tab key to move from field to field. When the focus is on one of the selection lists, you can use the up and down arrows to move through the options (they do not “cycle”, so you need to use the down arrow to get started moving through the selections). You can also type the first letter of the desired selection, as long as the choices are text. If more than one choice starts with the same letter, you can type the letter a second time to get the second selection and so on. For example, if the focus is on “Vul:”, then the first time you type the letter “N” (lower-case is fine), “None” will be shown. Typing a second “N” will show “N-S” (a third will cycle back to “None”).

When you click in a text area beside a suit symbol (or use the tab key to get to it), the dash will be removed and you can type the cards in the suit. Well, you can actually type anything you want, but there is some translation that will be done on what you enter. You can see the result when you move to another field (either by clicking in another field or using the tab key to move to another field).

The translations that are done are:

  • “T” or “t” is changed to “10”
  • “a”, “k”, “q” and “j” are changed to “A”, “K”, “Q” and “J” respectively.
  • “X” is changed to “x” and “h” is changed to “H” (for “Honor card”)

As mentioned earlier, the interesting thing about inserting a full-deal diagram is that the data you enter is “remembered”. If you go to insert another of the hand-type diagrams, or even another full-deal diagram, the dialog that is displayed will be pre-populated with that data. “What”s so great about that?” you may say. We”ll get to that in a moment. First let us look at what the above dialog will look like if we fill it in and insert the diagram into our post.

remembered dealAt the right is an example of the insert full-deal dialog that is displayed when data has been “remembered”. See that paper-and-eraser button at the bottom of the dialog to the right of the insert diagram button? It will appear in a similar position in any of the hand-type dialogs if they are populated with remembered data. If you click that button, it will clear the remembered data from the dialog.

Note: In the case of the full-deal dialog, it not only clears the form, but causes the “remembered” data to be “forgotten”, regardless of whether you actually insert the diagram into your post or not (you can exit any of these dialogs by clicking outside the dialog in the shaded area.

When a hand-type dialog is populated with remembered data, you can edit it to change what the resulting diagram looks like. Only the full-deal dialog will actually change the remembered data and then, only if the diagram is inserted into your post.

The remaining hand-type diagrams will not be discussed exhaustively. They will look similar to a part of the full-deal dialog (not an accident!) and are filled in a similar manner. Only relevant information is required. As an example, when entering a single hand, the board number, dealer and lead are generally irrelevant or simply not applicable.

Note: For a single-hand diagram with remembered data, changing the direction will cause the diagram to be re-populated with the corresponding hand from the remembered full-deal.

Well, if you will pardon the pun…

What”s the Big Deal About Remembered Data?

You may have already started to figure out ways of using this feature, so only one example of its utility will be described.

Suppose you want to describe an interesting deal. You want to show one hand (that of the eventual declarer perhaps), describe a spirited auction and indicate what the opening lead was. You then want to show both the North and South hands (South as usual, being the declarer). You want to describe the play to the first few tricks and then show the North-South hands again, perhaps describing what declarer was thinking about. Then you want to show the full deal and then the position that had been reached (perhaps some lovely progressive squeeze).

How do you do this without entering much of the same data, over and over again?

  • First create the complete deal. Click the Generate Full Deal button. Enter the whole deal, including vulnerability, dealer and names. If you are going to display the full deal in your blog post, then insert the diagram, possibly towards the end of your post.
  • Now for the power of “remembered data”. Create the appropriate diagrams, such as a single hand or the North-South hands using the appropriate tool. The Bridge Tools will populate those diagrams to match the full deal you created.
  • When you want to create diagrams with some of the cards already played, or to show an end-position, use the full deal tool, which will “remember” the deal, but update it by deleting the appropriate cards. After using the insert diagram button to generate the diagram (you may, or may not, want to use it in your post), create the appropriate diagrams which will be populated based on the updated full deal.
  • This same technique of updating the full deal can be used to create diagrams at various stages of the play.

So, the general idea is to create and insert a full-deal diagram. Then use the other bridge tools to show individual hands or combinations (for a defensive problem perhaps). The full-deal does not actually have to be copy-and-pasted into your post. It will not affect the remembered data.