ٹول بار جمائیں موبائل کی بورڈ کی تلافیطے شدہ فونٹاونچائی

NABI NOTE

ایک آزاد مآخذ WYSIWYG مدیر

NABI NOTE ایک اوپن سورس WYSIWYG ایڈیٹر ہے جس میں وضع، سیدھ، جدول اور اپلوڈ جیسی سہولتیں بنیادی حصے سے الگ «ونگز» نامی خود مختار ماڈیولز میں رکھی گئی ہیں۔ آپ صرف مطلوبہ ونگز منتخب کر کے ایڈیٹر بنا سکتے ہیں اور اپنے بنائے ہوئے ونگز بھی جوڑ سکتے ہیں۔ یہ خالص JavaScript میں لکھا گیا ہے، اس لیے React یا Vue جیسے فریم ورک میں بھی استعمال ہو سکتا ہے۔ بلڈ کا نظام نہ رکھنے والے صفحات پر CDN لائبریری سے فوراً شروع کیا جا سکتا ہے۔ اس کی اپنی دستاویزی شکل NABI TREE کو براؤزر کے DOM کے بغیر بھی Node.js میں HTML میں بدلا جا سکتا ہے۔ آنے والی دستاویزات رجسٹر شدہ قواعد کے مطابق درست کی جاتی ہیں؛ HTML بناتے وقت متن اور صفات کے خاص حروف کو ایسکیپ کیا جاتا ہے اور لنک کے پتے جانچے جاتے ہیں۔ البتہ اپنے بنائے ہوئے ونگز اور سرور سے ملنے والے ڈیٹا کا ایپلی کیشن کی حفاظتی پالیسی کے مطابق الگ جائزہ لینا ضروری ہے۔ CSS متغیرات اور rem پر مبنی ترتیب سے تھیم اور سائز بدلے جا سکتے ہیں؛ ڈارک موڈ اور مختلف زبانوں کے لیے فونٹ کی ترتیبات بھی دستیاب ہیں۔ جدول کی ترتیب، مقامی تاریخ اور AI کی مدد سے دستاویز پر کام بھی اسی دستاویزی ماڈل پر ہوتا ہے۔

رسم الخط

سانس سیرف (طے شدہ)، سیرف، یکساں چوڑائی اور رواں خط کے لیے زبان کے مطابق متبادل فونٹس فراہم کیے گئے ہیں۔ منتخب طرز کے لیے مناسب فونٹ نہ ہو تو براؤزر کا طے شدہ فونٹ دکھایا جاتا ہے۔ ایڈیٹر کا طے شدہ فونٹ میزبان صفحہ مقرر کرتا ہے۔

نیچے ہر خاندان کئی زبانوں میں دکھایا گیا ہے۔

산세리프 · ゴシック体 · 无衬线 · Serifenlos · Sans empattement · Sin serifa · Sem serifa · Без засечек · بلا زخارف · सैन्स सेरिफ़ · স্যান্স সেরিফ · سانس سیرف · Tanpa serif · بدون سریف · सॅन्स सेरिफ · Không chân · శాన్స్ సెరిఫ్ · Mara seref · Sans serif · Bila serif · சான்ஸ் செரிஃப் · ไร้เชิง · Senza grazie

세리프 · 明朝体 · 衬线 · Serif · Avec empattement · Con serifa · Com serifa · С засечками · بزخارف · सेरिफ़ · সেরিফ · سیرف · Berserif · سریف · सेरिफ · Có chân · సెరిఫ్ · Mai seref · Yenye serif · செரிஃப் · มีเชิง · Con grazie

고정폭 · 等幅 · 等宽 · Dicktengleich · Chasse fixe · Monoespaciada · Monoespaçada · Моноширинный · ثابت العرض · मोनोस्पेस · মনোস্পেস · یکساں چوڑائی · Lebar tetap · تک‌فاصله · Đơn cách · మోనోస్పేస్ · Tazara ɗaya · Eş aralıklı · Nafasi moja · ஒற்றையகலம் · ความกว้างคงที่ · Monospaziato · Monospace

필기체 · 筆記体 · 手写体 · Schreibschrift · Cursive · Cursiva · Рукописный · خط اليد · हस्तलिपि · হস্তলিপি · رواں خط · Tulisan tangan · دست‌نویس · हस्ताक्षर · Chữ viết tay · చేతిరాత · Rubutun hannu · El yazısı · Mwandiko · கையெழுத்து · ลายมือ · Corsivo

حروف کا حجم

بہت چھوٹا

چھوٹا

بڑا

بہت بڑا

عنوان

خالی سطر میں # لکھ کر خلا دبائیے — وہیں عنوان بن جاتا ہے۔

H1

H2

H3

H4

H5

H6

موٹا · ترچھا · خط کشیدہ · کٹا ہوا

موٹا ترچھا خط کشیدہ ~~کٹا ہوا~~ ایک ہی حرف پر ایک ساتھ لگائے جا سکتے ہیں۔

~~انہیں ایک پر ایک بھی لگایا جا سکتا ہے۔~~

بالائی اور زیریں عدد

رقبہ 3.5 میٹر² ہے، اور حاشیہ یوں لگتا ہے۔¹

پانی H₂O ہے۔

حروف کا رنگ · نمایاں قلم

رنگ ایسے چنے گئے ہیں کہ روشن اور گہرے، دونوں میں پڑھنے میں آسان رہیں۔

حروف کا رنگ سبز · مونگا · بنفشی · کہربائی · نیلا

نمایاں قلم زرد · سبز · آسمانی · گلابی · ارغوانی · نارنجی

کڑی

پتہ ڈالیے اور وہ کڑی بن جاتا ہے۔

آپ http:// اور https:// پتوں کے ساتھ اسی سائٹ کے . یا / سے شروع ہونے والے راستے بھی استعمال کر سکتے ہیں۔ javascript: جیسے پتے قبول نہیں کیے جاتے۔

مثلاً https://nabi.saro.me لکھ کر خلا یا اینٹر دبائیے — یہ خود ہی بدل جاتا ہے، جیسا یہاں دکھ رہا ہے۔

لنک کھولنا

دستاویز میں صرف لنک کا پتہ محفوظ ہوتا ہے؛ لنک کھولنے کا طریقہ دستاویز دکھانے والا صفحہ طے کرتا ہے۔

منسلک کی کڑی

تصویروں کے علاوہ دوسری فائلیں نیچے کی طرح منسلک فائل کے لنک کے طور پر رہتی ہیں۔

منسلک کا لنک دستاویز میں محفوظ ہوتا ہے۔

ہمواری

بائیں

درمیان

دائیں

عنوانات پر صف بندی لاگو نہیں کی جا سکتی۔

فہرستیں

نکاتی فہرست

خالی سطر میں - لکھ کر خلا دبائیے — وہیں نکاتی فہرست بن جاتی ہے۔

یہ ایک نکتہ ہے
- Tab / Shift+Tab سے اندر اور باہر کیا جاتا ہے۔

عددی فہرست

خالی سطر میں 1. لکھ کر خلا دبائیے — عددی فہرست بن جاتی ہے۔

پہلا
دوسرا
تیسرا

جانچ فہرست

خالی سطر میں [ ] یا [x] لکھ کر خلا دبائیے — جانچ فہرست بن جاتی ہے۔

یہ کام ہو چکا ہے۔
یہ ابھی باقی ہے۔

جدول

خانوں میں کئی پیراگراف اور بلاکس رکھے جا سکتے ہیں، اور پس منظر کے رنگ سے مواد کو الگ پہچانا جا سکتا ہے۔ نیچے کی جدول میں متن اور تصاویر براہ راست تبدیل کر کے دیکھیں۔

حوالہ جاتی مواد	کام کے نوٹس
تصویر اور اس کی وضاحت ایک ہی خانے میں ہیں۔	آزادانہ پیراگراف نیا پیراگراف بنانے کے لیے Enter، یا اسی پیراگراف میں نئی سطر کے لیے Shift+Enter دبائیں۔
خانے کا پس منظر بدلنا فہرست میں Tab سے حاشیہ بڑھانا کئی خانے منتخب کر کے ایک رنگ لگانا	ترمیم کے مشورے دیکھنے کے لیے کلک کریں خانوں میں سمیٹنے والے بلاکس، اقتباس، کوڈ اور ویڈیو بھی رکھ سکتے ہیں۔ خانے ضم کرنے پر ہر خانے کا مواد اپنی ترتیب میں برقرار رہتا ہے۔

حوالہ جاتی مواد

کام کے نوٹس

تصویر اور اس کی وضاحت ایک ہی خانے میں ہیں۔

آزادانہ پیراگراف

نیا پیراگراف بنانے کے لیے Enter، یا اسی پیراگراف میں نئی سطر کے لیے Shift+Enter دبائیں۔

خانے کا پس منظر بدلنا
فہرست میں Tab سے حاشیہ بڑھانا
کئی خانے منتخب کر کے ایک رنگ لگانا

ترمیم کے مشورے دیکھنے کے لیے کلک کریں

خانوں میں سمیٹنے والے بلاکس، اقتباس، کوڈ اور ویڈیو بھی رکھ سکتے ہیں۔

خانے ضم کرنے پر ہر خانے کا مواد اپنی ترتیب میں برقرار رہتا ہے۔

خانے کے اندر کلک کرنے سے پس منظر کا رنگ اور قطار و کالم کے اوزار ظاہر ہوتے ہیں۔ کئی خانے منتخب کر کے رنگ اور سیدھ ایک ساتھ بدل سکتے ہیں۔ پوری جدول کی جگہ بدلنے کے لیے «پورا جدول منتخب کریں» کے بعد سیدھ کے اوزار استعمال کریں۔

رنگوں یا کئی بلاکس والی جدولیں Markdown میں محفوظ کرتے وقت بھی HTML کی صورت میں برقرار رہتی ہیں۔

خانوں کے پس منظر کے رنگ

تمام دستیاب پس منظر کے رنگ یہاں دکھائے گئے ہیں۔ رنگ بدلنے کے لیے خانے پر کلک کریں، یا خصوصیات کے اوزار میں «طے شدہ» منتخب کر کے پس منظر صاف کریں۔

پیلا

yellow

سبز

green

آسمانی

cyan

گلابی

pink

ارغوانی

purple

نارنجی

orange

ستون کی ترتیب

جھلک دبائیے، پھر ذخیرہ اور قیمت کے سرے یکے بعد دیگرے دبائیے۔

نمونہ	ذخیرہ	قیمت	وزن
NB-7	1,200	349	1.2 kg
NB-9	20,000	99	0.9 kg
NB-12	3,500	1,299	1.4 kg
NB-80	900	8,900	2.1 kg
NB-100	طے ہونا باقی	12,999	2.4 kg

قیمت کے کالم میں سب قدریں عدد ہیں، اس لیے اسے عددی ترتیب سے مرتب کیا جاتا ہے۔

ذخیرہ کے کالم میں اعداد اور متن دونوں ہیں، اس لیے اسے متنی سٹرنگز کے مطابق مرتب کیا جاتا ہے۔

جدا کرنے والی لکیر

--- لکھ کر اینٹر دبائیے — جدا کرنے والی لکیر بن جاتی ہے۔

تصویر

چوڑائی 30% سے 100% تک رکھی جا سکتی ہے اور وہ دائیں، درمیان یا بائیں بیٹھتی ہے۔

فلوٹ علاقہ

ایک نظر میں

متن، تصاویر اور جدولوں کے لیے چھوٹا معاون علاقہ۔

جگہ	دائیں
زیادہ سے زیادہ چوڑائی	40%

اصل متن کے ساتھ اضافی وضاحت یا مختصر مواد رکھنے کے لیے فلوٹ علاقہ استعمال کریں۔ کشادہ دستاویز میں یہ متن علاقے کے پہلو میں بہتا ہے۔ اندر کلک کر کے اسی ایڈیٹر میں متن بدلیں اور تصاویر یا جدولیں شامل کریں۔

خصوصیات کے اوزار کھولنے کے لیے کرسر علاقے میں رکھیں۔ بائیں یا دائیں جگہ بدلیں اور متن کے مطابق زیادہ سے زیادہ چوڑائی 20، 30، 40 یا 50% منتخب کریں۔ چسپاں کی گئی جدولیں اور تصاویر بھی علاقے کے اندر رہتی ہیں۔

منتخب پیراگراف کو بھی ایک علاقے میں سمیٹ سکتے ہیں۔ چوڑائی کے ساتھ علاقہ کھولنے کا بٹن مواد کو اصل دستاویز میں چھوڑ دیتا ہے۔ پیش منظر میں ترمیم کی نقطہ دار حد چھپ جاتی ہے؛ تنگ دستاویز یا پرنٹ میں مواد ایک کالم میں جاری رہتا ہے۔

YouTube

چڑھاؤ

کوئی تصویر یا فائل مدیر پر گھسیٹ کر دیکھیے۔

یہ ڈیمو فائلیں حقیقی سرور کو نہیں بھیجتا۔ سرور پر محفوظ کرنے کے لیے اپنی ایپ میں اپلوڈر جوڑیں۔

تصویر منتخب کرنے کا خانہ کھولنے یا اپلوڈ شروع کرنے کے بعد صرف کرسر ہلانے سے اندراج پہلی جگہ پر ہی ہوتا ہے۔ انتظار کے دوران دستاویز میں ترمیم اندراج منسوخ کر کے اطلاع دکھاتی ہے۔ خانے میں شروع ہونے والے اپلوڈ کی پیش رفت اور نتیجہ بھی اسی خانے میں رہتے ہیں۔

اقتباس

خالی سطر میں > لکھ کر خلا دبائیے — اقتباس کا خانہ بن جاتا ہے۔
یہ کئی سطروں تک چل سکتا ہے۔

کوڈ

خالی سطر میں ``` لکھ کر خلا یا اینٹر دبائیے — کوڈ کا خانہ بن جاتا ہے۔

زبان بھی ساتھ لکھیے، جیسے ```java، پھر خلا یا اینٹر — خانے پر وہی زبان لگ جاتی ہے۔

import { createNabiWith, defaultWings } from 'nabi-note'

const { nabi } = createNabiWith(defaultWings)
const html = nabi.getHtml()

تہہ

تہہ عنوان اور اندر کے مواد سے بنتی ہے۔

آپ طے کر سکتے ہیں کہ یہ بند حالت میں محفوظ ہو یا کھلی۔

ٹول بار

عنوان، متن کی وضع، سیدھ، فہرست، اندراج اور دستاویز کے اوزار گروپوں میں ہیں۔ کمپیوٹر پر اوزار کھلے ہوتے ہیں؛ موبائل پر فوری اوزار اور مکمل پینل ملتا ہے۔ منتخب جدول یا تیرتے علاقے کی خصوصیات ٹول بار کے نیچے ظاہر ہوتی ہیں۔

مختصر کلیدیں

Shift تیزی سے دو بار دبائیں تاکہ کی بورڈ سے اوزار منتخب کر سکیں۔ کمپیوٹر پر کھلی ٹول بار اور موبائل پر مکمل پینل میں جائیں۔ Tab سے گروپ بدلیں، تیر والے بٹنوں سے اوزار منتخب کریں اور Enter سے چلائیں۔

اقتباس، کوڈ یا سمیٹنے والے بلاک کے آخر میں Enter تیزی سے دو بار دبانے پر باہر آ سکتے ہیں۔ دو بار دبانے کا طے شدہ وقفہ 180ms ہے۔

خودکار سجاوٹ

مثال	کلید	نتیجہ
#	خلا	عنوان
-	خلا	نکاتی فہرست
1.	خلا	عددی فہرست
[ ] · [x]	خلا	جانچ فہرست
>	خلا	اقتباس
``` · ```ts	خلا · اینٹر	کوڈ کا خانہ
---	اینٹر	جدا کرنے والی لکیر
https://…	خلا · اینٹر	کڑی

اخراج کے فعل

فعل	نتیجہ
getHtml()	HTML
getJson()	JSON

DOM کے بغیر بھی چلتا ہے

NABI TREE سے HTML بنانے کے لیے DOM کی ضرورت نہیں۔

سرور (Node.js) بھی محفوظ NABI TREE پڑھ کر انہی قواعد کے مطابق HTML بنا سکتا ہے۔

موبائل کا دوست

موبائل UI — سکرین کی چوڑائی کے مطابق ترمیم کے ٹولز ترتیب دیتا ہے۔
موبائل کی بورڈ کی مطابقت — کی بورڈ کھلنے پر ترمیم کے حصے کی اونچائی بدلتا ہے۔
لچکدار سائز — بڑا یا چھوٹا دکھانے کے مطابق ڈھلنے کے لیے مرکزی لے آؤٹ میں rem اکائیاں استعمال کرتا ہے۔
کئی زبانیں — زبان اور متن کی سمت کے مطابق لوکیل اور ٹائپ فیس مقرر کر سکتے ہیں۔

اپنی مرضی کی صورت

اپنا wing — کسی خصوصیت کی ضرورت ہو تو آپ اسے خود بنا کر جوڑ سکتے ہیں۔
اپنا CSS — بنیادی رنگوں، کونوں اور فاصلوں کو --nabi-* ٹوکن سے روشن اور گہرے موڈ کے مطابق بدل سکتے ہیں۔
آزاد مآخذ — سورس کوڈ GitHub پر شائع ہوتا ہے اور ہم مل کر اسے تیار کرتے ہیں۔

دستاویزات دیکھیے → nabi.saro.me

HTMLایڈیٹر لوڈ ہو رہا ہے…

JSONnabi-treeایڈیٹر لوڈ ہو رہا ہے…

تنصیب

npm install nabi-note

کوڈ

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, makeTranslator,
  defaultWings, mountUpload, mountUploadView, browserFileStore,
  mountFile, mountViewTools, browserHistoryStorage, mountLocalHistory,
  openHistoryPanel,
} from 'nabi-note'
import { mountDiffWing } from 'nabi-note/diff'
import { mountOutline } from 'nabi-note/viewer'

// The box that asks — without it the core answers "no" to everything (plug in your own)
const ask = { message: (t: string) => alert(t), confirm: (t: string) => confirm(t) }

const selected = [
  ...defaultWings,
]
const locale = createLocale('ur')
const { nabi, registry } = createNabiWith(selected, { ask, locale })

// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

const view = mountUploadView({ nabi, surface: content, locale })
const upload = mountUpload({
  nabi, root: content, locale,
  // your upload goes here — report progress with task.onProgress(0–100)
  uploader: async (task) => ({ uri: 'https://cdn.example/uploaded' }),
  extensions: ['png', 'jpg', 'pdf'], maxFileSize: 10 * 1024 * 1024,
  onStart: (tasks) => view.start(tasks),
  onProgress: (id, percent) => view.progress(id, percent),
  onSettle: () => view.settle(),
  onDone: () => view.done(),
})
const file = mountFile({ nabi, registry, store: browserFileStore(document), locale, name: () => 'note' })
const history = mountLocalHistory({ nabi, storage: browserHistoryStorage(window) })
const diff = mountDiffWing({ nabi, registry, surface: content, locale })

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale, fileSink: upload.take })

const trigger = document.createElement('button')
trigger.type = 'button'
trigger.textContent = makeTranslator(locale).t('outline')
trigger.style.cssText = 'position:fixed;right:1rem;bottom:1rem;z-index:1000'
root.append(trigger)
const outline = mountOutline(content, {
  trigger, locale,
  scrollContainer: () => root.classList.contains('is-fullscreen') ? root : window,
  onChange: ({ items, activeIndex, available, open }) => {
    trigger.hidden = !available
    trigger.setAttribute("aria-expanded", String(open))
  },
})
trigger.onclick = () => outline.toggle()
// Call outline.unmount() when removing the editor

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
// A tool that needs a panel comes back to the host — without this the button is dead
const toolbar = mountToolbar({
  ...shared, root: document.querySelector('#toolbar')!,
  file,
  onFiles: upload.take,
  onHost: (w) => {
    if (w === 'diff') { diff.open(); return }
    if (w !== 'localHistory') return
    openHistoryPanel({
      history, surface: content, locale, sessionId: history.sessionId,
      render: (record) => createNabiWith(selected, { doc: JSON.parse(record.body) }).nabi.getHtml(),
    })
  },
})
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))

// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')