Notepad++ and Dreamweaver - Tab Conversions

I work on a team of developers. Some like to use Dreamweaver but I really do prefer Notepad++. The problem comes whenever we need to edit one anothers files and the tabs don't match up / align (indentation). I'm curious to why this happens and wondering if there was a way in either Dreamweaver settings or Notepad++ settings to convert these tabs into something different so that they match. Is this possible / how?

Examples

The top image is simple CSS in Notepad++ and the bottom is code inside Dreamweaver.

Top: Notepad++ - Bottom: Dreamweaver

The image on the left is Notepad++ Tab Settings which is set to 4. The image on the right is Dreamweaver Code Formatting whose tab is also set to 4.

Left: Notepad++ - Right: Dreamweaver

The image on the left is Dreamweaver and the image on the right is Notepad++ which look to be using the same font Courier New 10px, though they do not look it.

Left: Dreamweaver - Right: Notepad++

Discrepancies

In the example above, in Dreamweaver it seems butting the bracket directly up to the h6 then tab does a double-space instead of a full 4 spaces where Notepad++ does a "7 space" tab which is very strange.

Howdy_McGee

Posted 2014-12-02T20:39:45.947

Reputation: 185

What display font are you using in Dreameaver and in Notepad++? In your second image (notepad++?) it doesn't look like a fixed width font ... – DavidPostill – 2014-12-02T22:19:12.583

a) Use the same font in both, and b) try turning off the "Indent with 2 spaces" option in Dreamweaver. Also, can you please make the TAB/whitespace characters visible in the editor(s) and re-do the screenshots (so we can see the actual whitespace characters being inserted)? – Ƭᴇcʜιᴇ007 – 2014-12-02T22:27:33.883

@Ƭᴇcʜιᴇ007 I'm not sure how to make the TAB/Whitespace visible in either editor besides highlighting - is there an easier way to do this that would be more helpful? – Howdy_McGee – 2014-12-02T22:35:57.863

Notepad++: View->Show Symbol->Show White Space and TAB. Dreamweaver: View->Code View Options->Hidden Characters. :) – Ƭᴇcʜιᴇ007 – 2014-12-02T22:40:24.737

@Ƭᴇcʜιᴇ007 That's cool, thanks! I've updated the first image to the image with the tab / space highlighting. – Howdy_McGee – 2014-12-02T22:54:00.870

Notepad is definitely NOT using a monospaced font in that image. – Ƭᴇcʜιᴇ007 – 2014-12-03T02:00:11.943

@Ƭᴇcʜιᴇ007 IDK that was default - I haven't changed any style settings - this is Global styles / Global overrides so it's being used everywhere by default. – Howdy_McGee – 2014-12-03T04:00:05.603

Answers

I believe that the problem is with the default styling of Notepad++ for CSS files.

Go to the menu entry of Settings / Style Configurator, then click on CSS and TAG, getting this :

You will notice that the font used is @Batang (which I personally never heard of or used). This font does not look like it is a monospace font.

Change the font to the default and click Save & Close :

Here is the display, where the first image is before and the second after this change :

The second image, from after the change, looks now much more like a monospace font.

You could change the fonts some more, to better agree with Dreamweaver. However, as I do not use it, I do not know what fonts it uses for displaying CSS.

harrymc

Posted 2014-12-02T20:39:45.947

Reputation: 306 093

Yeah that was the problem. My globals were Courier New but for whatever reason CSS was different. Now I know I need to check the fonts on a language level to match up with Dreamweaver. Thanks a ton! – Howdy_McGee – 2014-12-29T14:35:16.237

If you take a close look at the image, you'll notice that Notepad++ is not rendering the monospaced font correctly. It appears to be an issue with the space character. See how the h4 tags don't line up. Compare that to the Dreamweaver screenshot where all the characters are lined up in neat columns.

This StackOverflow question seems to be addressing the same problem, so there may be something in the CSS template file that's causing problems.

heavyd

Posted 2014-12-02T20:39:45.947

Reputation: 54 755